hds-web 1.33.2 → 1.33.4

package/src/HDS/components/Hero/h3.js

@@ -0,0 +1,413 @@
+import React, { useState, useEffect } from 'react';
+import { MediaBox } from '../../helpers/Media';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../../components/Buttons';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../../components/Tabs';
+import PropTypes from 'prop-types';
+import { LinkCard } from '../Cards/Link';
+
+const tabCard = (Content) => (
+  <>
+      <div className='tb:px-3'>
+          {Content.title &&
+              <Typography
+                  textStyle='h2'
+                  className={HDSColor(Content.titleTextColor)}>
+                  {Content.title}
+              </Typography>}
+
+          {Content.subTitle &&
+              <Typography
+                  textStyle='sub2'
+                  className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
+                  {Content.subTitle}
+              </Typography>}
+      </div>
+      {Content.btnLabel &&
+          <div className='flex pl-3 pt-6'>
+              <HDSButton
+                  label={Content.btnLabel}
+                  type='secondary'
+                  leftIconVariant='none'
+                  rightIconVariant='none'
+                  state='default'
+                  size='sm'
+                  rightAnimatedArrow={true}
+                  rightAnimatedArrowColor='#1E56E3'
+                  animatedHoverStroke='group-hover:stroke-blue-600'
+                  className='flex'
+                  btnTextColorClass='text-blue-600'
+              />
+          </div>
+      }
+
+  </>
+)
+
+export default function HeroCapability(props) {
+ const {
+  heroData, 
+  activeTab, 
+  onTabChange
+ } = props;
+ let currentTab;
+ if(activeTab.activeTab){
+  currentTab = activeTab.activeTab;
+ }
+ if (!heroData) {
+  return <div></div>; // Replace with your loading indicator or fallback UI
+}
+
+  const LinkCardsFn = (heroData) => {
+      return (
+        heroData.linkCards && (
+          <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row  ">
+            {heroData.linkCards.map((card, index) => (
+              <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
+                <LinkCard
+                  titleTextColor= {card.titleTextColor}
+                  descTextColor={card.descTextColor}
+                  linkUrl={card.linkUrl}
+                  cardBgColor={card.cardBgColor}
+                  cardHoverBg={card.cardHoverBg}
+                  iconVariant={card.iconVariant}
+                  iconStrokeClass={card.iconStrokeColor}
+                  iconArrowVariant={card.iconArrowVariant}
+                  iconArrowStrokeClass={card.iconArrowStrokeColor}
+                  title={card.title}
+                  description={card.description}
+                />
+              </div>
+            ))}
+          </div>
+        )
+      );
+    };
+
+
+  const handleTabClick = (tab) => {
+      if (tab.name) {
+          const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
+          onTabChange(nameCheck);
+        }
+      else return;
+      // Perform any other actions based on the clicked tab
+  }
+  let heroBgColorClass = '';
+  let bgTabClass = '';
+  let videoUrl = '';
+  let videoPoster = '';
+  let img_url = '';
+  let pillColorClass= '';
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
+      heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
+      bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
+      videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
+      videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
+      img_url = props.heroData.tabContent[currentTab]['img_url']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
+      pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
+  }
+  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
+      bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
+  }
+
+  return (
+      <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
+  {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
+          {props.heroData.navTabs &&
+
+              <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
+
+                  <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
+                      <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
+                          <Tab
+                              onTabClick={handleTabClick}
+                              tabs={props.heroData.navTabs}
+                              bgColorTab={props.heroData.bgColorTab}
+                              pillColor={pillColorClass}
+                          />
+                      </div>
+                  </div>
+                  <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
+                      <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
+                          {props.heroData.tabContent &&
+                              props.heroData.tabContent[currentTab] &&
+                              tabCard(props.heroData.tabContent[currentTab])}
+                      </div>
+                      <div className=' db:max-w-[540px] tb:w-1/2 '>
+                          <MediaBox
+                              video_url = {videoUrl}
+                              video_poster = {videoPoster}
+                             
+                          />
+                      </div>
+                  </div>
+
+                  <div className=''>
+                      {props.heroData.tabContent[currentTab] &&
+                          LinkCardsFn(props.heroData.tabContent[currentTab])}
+                   </div>   
+              </div>
+
+          }
+
+      </div>
+  )
+}
+
+
+
+
+HeroCapability.defaultProps={
+ heroData :  {
+        tabContent: {
+          'Performance': {
+            heroBgColor:'bg-green-500',
+            title: 'Blazing-fast APIs at Global Scale ',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-neutral-1000',
+            pillColor:'bg-pink-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'GraphQL response caching',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+          'Company': {
+            heroBgColor:'bg-blue-500',
+            title: 'Leverage Hasura’s Authorization Engine',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.ss',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            imgUrl:'',
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-neutral-1000',
+            pillColor:'bg-amber-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+          'Authorization': {
+            heroBgColor:'bg-cyan-500',
+            title: 'Blazing-fast APIs at Global Scale ',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            imgUrl:'',
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-pink-500',
+            pillColor:'bg-neutral-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+        },
+      
+        navTabs: [
+          {
+            current: true,
+            name: 'Performance'
+          },
+          {
+            current: 'false',
+            name: 'Company'
+          },
+          {
+            current: 'false',
+            name: 'Authorization'
+          },
+          {
+            current: 'false',
+            name: 'Observability'
+          },
+          {
+            current: 'false',
+            name: 'API Security'
+          }
+        ]
+      }
+    
+}

package/src/HDS/components/Hero/heroEvents.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSPaperForm } from "../../helpers/Paperform";
+import { Icon } from "../common-components";
+export default function HeroEvents(props) {
+
+    return (
+        <div className="max-w-7xl">
+            <div className="relative">
+                <img loading="lazy" src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1692355512/hasura-design-system/heroevents2_c8mpzp.png" alt={props.img_alt} className='bg-discord h-[336px] object-cover ' />
+            </div>
+            <div className="flex items-start py-12 px-20">
+                <div className="flex-1">
+             
+                </div>
+                <div className="bg-neutral-0 rounded-3xl w-[400px] z-[1] -mt-[200px] p-10 border border-neutral-200">
+                    <div className="flex gap-2 items-center pb-6">
+                        <Icon height='h-5 w-5' variant='videorecorder' strokeClass='stroke-blue-600' />
+                        <Typography textStyle='h5' className='text-neutral-1000'></Typography>
+                    </div>
+                    <div>
+                        <HDSPaperForm
+                            formId='hf-1051'
+                            styleClass="paper-form-wrapper"
+                        />
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+    )
+}

package/src/HDS/components/Hero/heroIntegration.js

@@ -0,0 +1,161 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { LinkCard } from '../Cards/Link';
+//hover:scale-[1.09] hover:z-10 hover:transition hover:duration-300
+export default function HeroIntegration({ heroData}) {
+
+    const stackedCircularCard = (circularCardData) => (
+        <div className="flex flex-row">
+            {circularCardData && circularCardData.map((card, index) => (
+                <div
+                    key={index}
+                    className={`w-20 h-20 ${index > 0 ? '-ml-4' : ''} ${HDSColor(card.cardBgClass)} ${HDSColor(card.cardHoverbgClass)} rounded-full flex items-center justify-center `}
+                >
+                    <div className="w-14 h-14">
+                        <img className="inline-block" src={card.img_link} alt={card.img_alt} />
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+
+    // const scrollToNextDiv = (element) => {
+    //     const nextDiv = element.nextElementSibling;
+    //     if (nextDiv) {
+    //         nextDiv.scrollIntoView({ behavior: 'smooth' });
+    //     }
+    // };
+    // const handleClick = (event) => {
+    //     const arrowIcon = event.target;
+    //     const arrowContainer = arrowIcon.parentNode;
+    //     scrollToNextDiv(arrowContainer);
+    // };
+    const title = () => (
+        heroData.title && (
+            <>
+                {heroData.title && (
+                    <>
+                        {heroData.stackedCard &&
+                            <div className="pb-6">
+                                {stackedCircularCard(heroData.stackedCard)}
+                            </div>
+                        }
+                        <Typography textStyle='h2' as="h2" className={"pb-2 tb:text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+                    </>
+
+                )
+                }
+            </>
+        )
+    )
+
+    const heroButton = () => (
+        heroData.buttons && (
+            <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+                {heroData.buttons[0] &&
+                    <HDSButton
+                        type="primary"
+                        btnTextColorClass={HDSColor('text-neutral-0')}
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        label={heroData.buttons[0].cta_text}
+                        state='default'
+                        size='lg'
+                        rightAnimatedArrow='true'
+                        rightAnimatedArrowColor='#ffffff'
+                    />
+                }
+                {heroData.buttons[1] && 
+                <HDSButton
+                    type="primaryLink"
+                    btnTextColorClass={HDSColor('text-neutral-0')}
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    label={heroData.buttons[1].cta_text}
+                    state='default'
+                    size='lg'
+                    rightAnimatedArrow='true'
+                    rightAnimatedArrowColor='#ffffff'
+                />}
+
+
+            </div>
+        )
+    )
+    const LinkCardsFn = (heroData) => {
+        return (
+            heroData.linkCards && (
+                <div className="flex px-8 tb:px-10 tb:justify-center db-s:px-0 overflow-auto scrollbar-hide flex-row gap-6 db-s:mt-[68px] tb:flex-row ">
+                    {heroData.linkCards.map((card, index) => (
+                        <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
+                            <LinkCard
+                                titleTextColor={card.titleTextColor}
+                                descTextColor={card.descTextColor}
+                                linkUrl={card.linkUrl}
+                                iconVariant={card.iconVariant}
+                                iconStrokeClass={card.iconStrokeColor}
+                                iconArrowVariant={card.iconArrowVariant}
+                                iconArrowStrokeClass={card.iconArrowStrokeColor}
+                                title={card.title}
+                                description={card.description}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )
+        );
+    };
+
+    const imageCard = (heroData) => (
+        heroData.imageUrl && (
+            <div className="py-12 tb:py-14 db-s:pt-0   ">
+                <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full db-s:max-w-[540px]' />
+            </div>
+        )
+    )
+
+    return (
+        <div className="">
+            <div className="">
+                <div className={"max-w-7xl mx-auto pb-14 tb:pb-10 db-s:p-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+                    <div className="w-full">
+                        <div className={"flex flex-col px-8 db-s:px-0 tb:px-10 pt-5 tb:pt-10 db-s:flex db-s:justify-between db-s:items-center db-s:flex-row db-s:w-full db-s:gap-x-[92px]"}>
+                            <div className='db-s:max-w-[490px] tb-l:max-w-[658px]  w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
+                            >
+
+                                {title(heroData)}
+                                {
+                                    heroData.sub_title && (
+                                        <Typography textStyle="sub1" className={"tb-l:text-center db:text-left flex" + ((heroData.sub_title_color) ? heroData.sub_title_color : "")}>{heroData.sub_title}</Typography>
+                                    )
+                                }
+                                {
+                                    heroData.description && (
+                                        <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                                    )
+                                }
+                                {heroButton(heroData)}
+                            </div>
+                            <div className="h-full flex justify-center db-s:self-start w-full">{imageCard(heroData)}</div>
+                        </div>
+                        {LinkCardsFn(heroData)}
+
+                    </div>
+                </div>
+                {/* {
+                    heroData.scrollArrow && (
+                        <div className="flex justify-center flex-row z-10" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
+                            <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" onClick={handleClick} >
+                                <Icon
+                                    variant='chevrondowndouble'
+                                    strokeClass='stroke-neutral-800' height='h-6 w-6' />
+                            </div>
+                        </div>
+                    )
+                } */}
+            </div>
+        </div>
+    );
+}