hds-web 1.6.7 → 1.6.8

package/src/HDS/components/Headers/v3Header.js

@@ -1,11 +1,10 @@
-import React, {useState} from 'react';
+import React from 'react';
 import { Fragment } from 'react';
 import { Popover, Transition } from '@headlessui/react';
 import { Icon } from '../common-components/Icon';
 import { Typography } from '../../foundation/Typography';
 import { HDSButton } from '../Buttons';
 import { V3Dropdown } from '../Cards/Dropdown'
-import { HDSColor } from '../../foundation/ColorPalette';
 
 const solutions = [
     {
@@ -34,7 +33,6 @@ function classNames(...classes) {
 
 export default function V3Header(props) {
 
-    const [isShowing, setIsShowing] = useState(false)
 
     const dropdown = (solutions) => (
         <Transition
@@ -47,9 +45,11 @@ export default function V3Header(props) {
             leaveTo="opacity-0 translate-y-1"
         >
             <Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
-
+            <div className='ml-[9.55rem]'>
+            <Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100'/>
+            </div>
                 <div className=" p-2 bg-neutral-100 rounded-lg">
-
+                    
                     <V3Dropdown
                         primaryCard={{
                             iconVariant: 'home03',
@@ -106,7 +106,7 @@ export default function V3Header(props) {
                             }
                         ]}
                     />
-
+                   
                 </div>
             </Popover.Panel>
         </Transition>
@@ -116,28 +116,17 @@ export default function V3Header(props) {
     (
         <>
             {HEADER_LIST.map((item, index) => (
-                <Popover className="relative" key={index}>
-                    {({ open  }) => (
+                <Popover className="relative">
+                    {({ open }) => (
                         <>
                             <Popover.Button
                                 className={classNames(
-                                    open ? '' : 'text-gray-500',
+                                    open ? 'text-pink-800' : 'text-gray-500',
                                     'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
                                 )}
-                                onMouseEnter={() => setIsShowing(true)}
-                                onMouseLeave={() => setIsShowing(false)}
-                                
                             >
-                                <div className='flex flex-col items-center'>
                                 <Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
-                                {open && (
-                                <div className='absolute z-20 top-8'>
-                                    {/* <Icon variant='triangle' height='h-4 w-4' strokeClass='stroke-neutral-1000' /> */}
-                                
-                                </div>
-                                
-                                )}
-                                </div>
+                                {/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
                             </Popover.Button>
                             <div className=''>
                                 {dropdown(item['titleDropdown'])}
@@ -153,71 +142,59 @@ export default function V3Header(props) {
     )
 
     return (
-        <Popover className="relative">
-            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between p-6 tb-l:justify-between tb-l:space-x-6`}>
-                <div className='flex items-center'>
-                    <a href={props.headerUrl} className="flex items-center">
-                        <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
+        <Popover className="relative bg-white">
+            <div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
+                <div>
+                    <a href="#" className="flex items-center">
+                        <Icon variant={'hasuraPrimary'} strokeColor={''} />
                     </a>
-                    <Popover.Group as="nav" className="hidden tb-l:pl-8 tb-l:flex tb-l:space-x-6">
+                </div>
+                <div className="-my-2 -mr-2 md:hidden">
+                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                        <span className="sr-only">Open menu</span>
+                        <div className=' gap-6 flex'>
+                            <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                            <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
+                        </div>
+                    </Popover.Button>
+                </div>
+                <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
+                    <Popover.Group as="nav" className="flex space-x-6">
                         {headerListfn(props.HEADER_LIST)}
                     </Popover.Group>
-                </div>
-                <div className='flex tb-l:justify-between'>
-                    <div className=" tb-l:flex tb-l:flex-1 tb-l:items-center tb-l:justify-between">
 
-                        <div className="flex items-center gap-4 tb-l:ml-12">
 
-                            {/* <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
-                            <div>
+                    <div className="flex items-center gap-6 md:ml-12">
+
+                        <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                        <HDSButton
+                            label="Log In"
+                            type='tonal'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#3970FD'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
+                        />
+                        <HDSButton
+                            label="Get Started"
+                            type='primary'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#ffffff'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
+                        />
 
-                            </div>
-                            <a href='' className='hidden tb:flex'>
-                                <Typography textStyle='body3c-medium' className='text-neutral-800'>
-                                    Contact Sales
-                                </Typography>
-                            </a>
-                            <HDSButton
-                                label="Log In"
-                                type='tonal'
-                                leftIconVariant='none'
-                                rightIconVariant='none'
-                                state='default'
-                                size='sm'
-                                rightAnimatedArrow='true'
-                                rightAnimatedArrowColor='#3970FD'
-                                animatedHoverStroke='group-hover:stroke-neutral-0'
-                                className='hidden tb-l:flex'
-                            />
-                            <HDSButton
-                                label="Get Started"
-                                type='primary'
-                                leftIconVariant='none'
-                                rightIconVariant='none'
-                                state='default'
-                                size='sm'
-                                rightAnimatedArrow='true'
-                                rightAnimatedArrowColor='#ffffff'
-                                animatedHoverStroke='group-hover:stroke-neutral-0'
-                                className='hidden tb:flex'
-                            />
-
-                        </div>
+                    </div>
 
 
 
-                    </div>
-                    <div className="tb-l:hidden flex items-center">
-                        <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
-                            <span className="sr-only">Open menu</span>
-                            <div className=' gap-6 flex'>
-                                {/* <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
-                                <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
-                            </div>
-                        </Popover.Button>
-                    </div>
                 </div>
-
             </div>
 
             <Transition
@@ -229,12 +206,12 @@ export default function V3Header(props) {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
             >
-                <Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition tb-l:hidden">
-                    <div className=" rounded-lg bg-neutral-0 h-[calc(100%-112px)]  shadow-lg">
-                        <div className="bg-neutral-0">
+                <Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition md:hidden">
+                    <div className=" rounded-lg bg-white h-[calc(100%-112px)]  shadow-lg">
+                        <div className="">
                             <div className="flex items-center justify-end">
                                 <div className="">
-                                    <Popover.Button className="inline-flex items-center justify-center pt-4 pr-4 w-full focus:ring-0">
+                                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 w-full">
                                         <Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
                                     </Popover.Button>
                                 </div>
@@ -275,35 +252,33 @@ export default function V3Header(props) {
                         <div className="py-6 px-5 ">
                             <div className="mt-6 ">
                                 <div className='flex flex-row justify-around'>
-                                    <div className='w-full flex gap-2'>
-                                        <div className='w-1/2'>
-                                            <HDSButton
-                                                label="Log In"
-                                                type='tonal'
-                                                leftIconVariant='none'
-                                                rightIconVariant='none'
-                                                state='default'
-                                                size='sm'
-                                                rightAnimatedArrow='true'
-                                                rightAnimatedArrowColor='#3970FD'
-                                                animatedHoverStroke='group-hover:stroke-neutral-0'
-
-
-                                            />
-                                        </div>
-                                        <div className='w-1/2'>
-                                            <HDSButton
-                                                label="Sign up"
-                                                type='primary'
-                                                leftIconVariant='none'
-                                                rightIconVariant='none'
-                                                state='default'
-                                                size='sm'
-                                                rightAnimatedArrow='true'
-                                                rightAnimatedArrowColor='#ffffff'
-                                                animatedHoverStroke='group-hover:stroke-neutral-0'
-                                            />
-                                        </div>
+                                    <div className='w-full '>
+                                        <HDSButton
+                                            label="Log In"
+                                            type='tonal'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow='true'
+                                            rightAnimatedArrowColor='#3970FD'
+                                            animatedHoverStroke='group-hover:stroke-neutral-0'
+
+                                        />
+                                    </div>
+                                    <div className='w-full'>
+                                        <HDSButton
+                                            label="Sign up"
+                                            type='primary'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow='true'
+                                            rightAnimatedArrowColor='#ffffff'
+                                            animatedHoverStroke='group-hover:stroke-neutral-0'
+
+                                        />
                                     </div>
                                 </div>
                             </div>
@@ -389,6 +364,5 @@ V3Header.defaultProps = {
             ]
         },
 
-    ],
-    headerUrl: 'https://hasura.io/'
+    ]
 }

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

@@ -9,19 +9,6 @@ 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");
@@ -108,34 +95,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>
     )
   )
@@ -166,20 +153,20 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full w-1/2' />
+      <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>
     )
   )
-
+  
   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: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'
+            <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'
               >
                 {
                   heroData.tag_line && (
@@ -201,18 +188,14 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
                 {
                   heroData.description && (
-                    <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    <Typography textStyle="sub1" className="tb-l:text-center 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)}
@@ -220,14 +203,9 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
           </div>
         </div>
         {
-          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>
+          scrollArrow && (
+            <>
+            </>
           )
         }
       </div>

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

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

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

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

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

@@ -7,9 +7,9 @@ import { Tab } from '../Tabs'
 import ReactMarkdown from "react-markdown";
 
 const tabs = [
-    { name: 'Tier 1', href: '', current: true },
-    { name: 'Tier 2', href: '', current: false },
-    { name: 'Tier 3', href: '', current: false },
+    { name: 'Level 1', href: '', current: true },
+    { name: 'Level 2', href: '', current: false },
+    { name: 'Level 3', href: '', current: false },
 ]
 
 
@@ -66,9 +66,9 @@ export default function TableB(props) {
     const [activeTab, setActiveTab] = useState(1);
 
     function handleTabClick(tab) {
-        if (tab.name === 'Tier 1') setActiveTab(1);
-        if (tab.name === 'Tier 2') setActiveTab(2);
-        if (tab.name === 'Tier 3') setActiveTab(3);
+        if (tab.name === 'Level 1') setActiveTab(1);
+        if (tab.name === 'Level 2') setActiveTab(2);
+        if (tab.name === 'Level 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 p-2 bg-neutral-0 rounded-full shadow tb-l:hidden'>
+                    <div className=' mt-11 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 border-b border-neutral-200 divide-neutral-200 text-center rounded-t-3xl'>
+                            <tr className='divide-x 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 w-full justify-center'}>
+                                                <div className={'flex items-center gap-2'}>
                                                     {TABLE_HEADER[key]['icon'] &&
                                                         (
                                                             <Icon
@@ -192,7 +192,7 @@ export default function TableB(props) {
                                                         TABLE_HEADER[key]['title'] && key == 0 && (
                                                             <Typography
                                                                 textStyle='h5'
-                                                                className={`w-full text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
+                                                                className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
                                                                 {TABLE_HEADER[key]['title']}
                                                             </Typography>)
                                                     }

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

@@ -9,7 +9,9 @@ export default function TableA(props) {
         children
 
     } = props;
-    const firstObjectLength = Object.keys(tableValue[0]).length;
+    console.log(tableValue.length);
+    const tableLength = tableValue.length;
+    
     return (
         <div className=" ">
             <div className="sm:flex sm:items-center ">
@@ -17,50 +19,51 @@ export default function TableA(props) {
                     <h1 className="text-base font-semibold leading-6 text-gray-900">{head}</h1>
                     <p className="mt-2 text-sm text-gray-700">{description}</p>
                 </div>
-
+                
             </div>
+
             <div>
-                <div className="border border-neutral-100 rounded-2xl">
+                <div className="border bg-neutral-50 border-neutral-100 rounded-2xl">
                     <table className="min-w-full divide-y divide-neutral-100 ">
+                       <div>
+
+
                         <thead>
                             <tr className='divide-x divide-neutral-100'>
-                                {Object.keys(tableValue[0]).map((key, index) => (
+                                {Object.keys(tableValue[0]).map((key) => (
                                     <th
                                         key={key}
                                         scope="col"
-                                        className={(index === 0) ? 'rounded-tl-2xl text-left sm:table-cell bg-neutral-50' : 'text-left sm:table-cell bg-neutral-50 rounded-tr-2xl'}
+                                        className="text-left sm:table-cell"
                                     >
                                         <Typography className='p-6' textStyle='body3c-bold'>{key}</Typography>
-
+                                        
                                     </th>
                                 ))}
-
                             </tr>
                         </thead>
-                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 ">
-                            {tableValue.slice(1).map((value, index) => (
-                                <tr key={index} className='divide-x divide-neutral-100 '>
+                      
+                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 bg-white">
+                            {tableValue.map((value,index) => (
+                                <tr key={index} className='divide-x divide-neutral-100'>
                                     {Object.keys(value).map((key, index2) => (
-
-
-
                                         <td
-                                            key={index2 + index}
+                                             key={index2+index}
                                             className={
-                                                'p-6 ' + ((index == `${tableValue.length - 2}`) ? 'rounded-3xl' : '')
+                                                'p-6 bg-neutral-0 ' + ((index == `${tableValue.length-1}`) ? 'rounded-3xl' : '')
                                             }
                                         >
-
-                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key.toString()}</Typography>
-                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>{value[key].toString()}</Typography>
+                                            
+                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key}</Typography>
+                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>Endless hours spent writing boilerplate code, resolvers, or mapping logic.</Typography>
 
                                         </td>
-
                                     ))}
                                 </tr>
                             ))}
                         </tbody>
-                    </table>
+                        </div>
+                        </table>
                 </div>
             </div>
         </div>