hds-web 1.6.8 → 1.7.0

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

@@ -9,6 +9,19 @@ import { v4 as uuidv4 } from 'uuid';
 
 export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
   const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+
+  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 videoMute = () => {
     if (heroData.video_url) {
       const videoEle = document.getElementById("hero_vid");
@@ -95,34 +108,34 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
   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
+
+
+        {heroData.buttons[0] &&
+          <HDSButton
             type="secondary"
             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'
-            />}
-      
-        
+            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>
     )
   )
@@ -153,20 +166,20 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="w-1/2 tb-l:w-full tb:flex tb:flex-col tb:justify-center">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full ' />
+      <div className="">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full w-1/2' />
       </div>
     )
   )
-  
+
   const videoGradientBg = HDSColor(heroData.video_gradient_bg);
   return (
     <div className="">
       <div className="">
         <div className={"max-w-7xl mx-auto px-20 py-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
           <div className="w-full">
-            <div className={"tb-l:flex tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
-              <div className='w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
+            <div className={"tb-l:flex tb-l:justify-between tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
+              <div className='max-w-[29.18rem] w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
               >
                 {
                   heroData.tag_line && (
@@ -188,14 +201,18 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
                 {
                   heroData.description && (
-                    <Typography textStyle="sub1" className="tb-l:text-center db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
                   )
                 }
                 {heroButton(heroData)}
 
-                
+
               </div>
+              <div className="">
+
+              
               {imageCard(heroData)}
+              </div>
             </div>
 
             {LinkCardsFn(heroData)}
@@ -203,9 +220,14 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
           </div>
         </div>
         {
-          scrollArrow && (
-            <>
-            </>
+          heroData.scrollArrow && (
+            <a 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> 
+            </a>
           )
         }
       </div>

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/index.js

@@ -1,2 +1,3 @@
 export {default as Hero1} from './h1'
-export {default as HeroSecondary} from './h2'
+export {default as HeroSecondary} from './h2'
+export {default as HeroCapability} from './h3'

package/src/HDS/components/Tables/index.js

@@ -1,3 +1,4 @@
 export {default as TableA} from './tableA';
 export {default as TableB} from './tableB';
-export {default as TableC} from './tableC';
+export {default as TableC} from './tableC';
+export {default as PricingTableB} from './tableD';

package/src/HDS/components/Tables/tableB.js

@@ -7,9 +7,9 @@ import { Tab } from '../Tabs'
 import ReactMarkdown from "react-markdown";
 
 const tabs = [
-    { name: 'Level 1', href: '', current: true },
-    { name: 'Level 2', href: '', current: false },
-    { name: 'Level 3', href: '', current: false },
+    { name: 'Tier 1', href: '', current: true },
+    { name: 'Tier 2', href: '', current: false },
+    { name: 'Tier 3', href: '', current: false },
 ]
 
 
@@ -66,9 +66,9 @@ export default function TableB(props) {
     const [activeTab, setActiveTab] = useState(1);
 
     function handleTabClick(tab) {
-        if (tab.name === 'Level 1') setActiveTab(1);
-        if (tab.name === 'Level 2') setActiveTab(2);
-        if (tab.name === 'Level 3') setActiveTab(3);
+        if (tab.name === 'Tier 1') setActiveTab(1);
+        if (tab.name === 'Tier 2') setActiveTab(2);
+        if (tab.name === 'Tier 3') setActiveTab(3);
         // Perform any other actions based on the clicked tab
     }
 
@@ -94,7 +94,7 @@ export default function TableB(props) {
                             </Typography>
                         )}
                     </div>
-                    <div className=' mt-11 rounded-full shadow tb-l:hidden'>
+                    <div className=' mt-11 p-2 bg-neutral-0 rounded-full shadow tb-l:hidden'>
                         <Tab onTabClick={handleTabClick} tabs={tabs} />
                     </div>
                 </div>
@@ -170,7 +170,7 @@ export default function TableB(props) {
                 <div className="mt-12 bg-neutral-0 rounded-3xl ">
                     <table className="min-w-full shadow tableclss rounded-3xl ">
                         <thead>
-                            <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
+                            <tr className='divide-x border-b border-neutral-200 divide-neutral-200 text-center rounded-t-3xl'>
                                 {Object.keys(TABLE_HEADER).map((key, index) => (
                                     <th
                                         key={index}
@@ -179,7 +179,7 @@ export default function TableB(props) {
                                     >
                                         <div className=''>
                                             <div className='flex flex-col justify-center items-center text-center'>
-                                                <div className={'flex items-center gap-2'}>
+                                                <div className={'flex items-center gap-2 w-full justify-center'}>
                                                     {TABLE_HEADER[key]['icon'] &&
                                                         (
                                                             <Icon
@@ -192,7 +192,7 @@ export default function TableB(props) {
                                                         TABLE_HEADER[key]['title'] && key == 0 && (
                                                             <Typography
                                                                 textStyle='h5'
-                                                                className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
+                                                                className={`w-full text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
                                                                 {TABLE_HEADER[key]['title']}
                                                             </Typography>)
                                                     }