hds-web 1.8.7 → 1.8.9

package/src/HDS/components/Carousels/{homeCarousel2.js → homeCarousel.js}

@@ -127,23 +127,117 @@ const carouselItems2 = [
         size: 'w-full'
     }
 ];
+
+const video_props =
+    [
+        {
+            // video_url: 'https://nutrien-prod-asset.s3.us-east-2.amazonaws.com/s3fs-public/video-thumbnails/2019-05/Nutrien-Banner-Loop-V4.mp4',
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
+
+            testimonial: {
+                card: {
+                    cardBg: '',
+                    title_img: "Optum",
+                    img_alt: 'optum',
+                    subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
+                    avatar: {
+                        img_url: '',
+                        name: 'Nagaraja Nayak',
+                        designation: 'Optum',
+                        avatarBgColor: 'bg-yellow-400'
+                    }
+                },
+                cardHover: {
+                    cardBg: 'bg-green-500',
+                    img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
+                    img_alt: '',
+                    title: 'Optum goes from concept to production in 100 days with Hasura',
+                    button: {
+                        cta_text: 'Read the case Study'
+                    }
+
+
+                }
+            }
+        },
+        {
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
+
+            testimonial: {
+                card: {
+                    cardBg: '',
+                    title_img: "Optum",
+                    img_alt: 'optum',
+                    subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
+                    avatar: {
+                        img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
+                        name: 'Nagaraja Nayak',
+                        designation: 'Optum',
+                        avatarBgColor: 'bg-yellow-400'
+                    }
+                },
+                cardHover: {
+                    cardBg: 'bg-green-500',
+                    img_url: '',
+                    img_alt: '',
+                    title: 'Optum goes from concept to production in 100 days with Hasura',
+                    button: {
+                        cta_text: 'Read the case Study'
+                    }
+
+
+                }
+            }
+        },
+        {
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
+            testimonial: {
+                card: {
+                    cardBg: '',
+                    title_img: "Optum",
+                    img_alt: 'optum',
+                    subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
+                    avatar: {
+                        img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
+                        name: 'Nagaraja Nayak',
+                        designation: 'Optum',
+                        avatarBgColor: 'bg-yellow-400'
+                    }
+                },
+                cardHover: {
+                    cardBg: 'bg-green-500',
+                    img_url: '',
+                    img_alt: '',
+                    title: 'Optum goes from concept to production in 100 days with Hasura',
+                    button: {
+                        cta_text: 'Read the case Study'
+                    }
+
+
+                }
+            }
+        },
+    ]
 const SideCard = () => (
-    <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl max-h-[338px]'>
-        <div className='w-[300px] flex justify-center'>
-            <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
-        </div>
-        <div className='w-[300px] flex justify-center'>
-            <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
+    <div className="h-full">
+
+        <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl h-[338px] '>
+            <div className='w-[300px] flex justify-center'>
+                <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
+            </div>
+            <div className='w-[300px] flex justify-center'>
+                <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
+            </div>
         </div>
     </div>
 )
-export default function HomePageCarousel2(props) {
+export default function HomePageCarousePrimary(props) {
     const {
         cards = carouselItems,
         cards2 = carouselItems2,
     } = props;
 
-
+    const [boolean, setBoolean] = React.useState(null);
     const carouselRef = useRef(null); // Create a ref using useRef
     const carouselRef2 = useRef(null); // Create a ref using useRef
     const [currentCard, setCurrentCard] = React.useState(0);
@@ -162,6 +256,7 @@ export default function HomePageCarousel2(props) {
 
     const nextCard = () => {
         let scrollByAmount = 1;
+        let scrollByAmount2 = 5;
 
         if (currentCard < totalCards - scrollByAmount) {
             setCurrentCard(currentCard + scrollByAmount);
@@ -170,7 +265,7 @@ export default function HomePageCarousel2(props) {
                 behavior: "smooth",
             });
             carouselRef2.current.scrollTo({
-                left: carouselRef2.current.scrollLeft + carouselRef2.current.children[0].offsetWidth * scrollByAmount,
+                left: carouselRef2.current.scrollLeft + carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
                 behavior: "smooth",
             });
         }
@@ -189,14 +284,17 @@ export default function HomePageCarousel2(props) {
 
     const previousCard = () => {
         let scrollByAmount = 1;
-
-
+        let scrollByAmount2 = 5;
         if (currentCard > 0) {
             setCurrentCard(currentCard - scrollByAmount);
             carouselRef.current.scrollTo({
                 left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
                 behavior: "smooth",
             });
+            carouselRef2.current.scrollTo({
+                left: carouselRef2.current.scrollLeft - carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
+                behavior: "smooth",
+            });
         } else {
             const lastCardIndex = totalCards - 1;
             const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
@@ -205,28 +303,37 @@ export default function HomePageCarousel2(props) {
                 left: scrollLeft,
                 behavior: "smooth",
             });
+            const scrollLeft2 = carouselRef2.current.scrollWidth - carouselRef2.current.children[0].offsetWidth * scrollByAmount2;
+            setCurrentCard(lastCardIndex);
+            carouselRef.current.scrollTo({
+                left: scrollLeft2,
+                behavior: "smooth",
+            });
         }
     };
 
     const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-purple-200 hover:bg-neutral-0 flex items-center justify-center';
 
-    const sliderControl = isLeft => (
+    const toggleBoolean = () => {
+        setBoolean((prevBoolean) => !prevBoolean); // Toggle the boolean value
+        console.log(boolean)
+    };
+
+    const sliderControl = (isLeft) => (
         <button
             type="button"
-            onClick={isLeft ? previousCard : nextCard}
-            className={`flex  ${arrowStyle} ${isLeft ? '' : ''}`}
-
+            onClick={() => {
+                toggleBoolean(); // Call the toggleBoolean function
+                isLeft ? previousCard() : nextCard(); // Call previousCard or nextCard based on the button clicked
+            }}
+            className={`flex ${arrowStyle} ${isLeft ? '' : ''}`}
         >
             <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
-                {isLeft ?
-
+                {isLeft ? (
                     <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
-
-                    :
-
+                ) : (
                     <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
-
-                }
+                )}
             </span>
         </button>
     );
@@ -244,66 +351,79 @@ export default function HomePageCarousel2(props) {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
         >
-            <div className="hidden tb:flex tb:flex-col-reverse">
-                <div className="flex absolute top-[33rem] justify-center items-center">
+            <div className="hidden tb:flex-col-reverse tb:flex items-center">
+                <div className="flex  z-20 justify-center items-center">
                     {/* {slider()} */}
                     <div className="flex w-screen justify-center ">
                         {sliderControl(true)}
                         {sliderControl()}
                     </div>
                 </div>
-                <div className="justify-center w-screen absolute select-none items-center"
+                <div className="justify-center  select-none items-center"
 
                 >
                     <div className="w-screen flex justify-center">
-                        <div className={`snap-x w-[643px] bg-neutral-0 absolute z-10  inline-flex select-none overflow-x-hidden scrollbar-hide`}
-                            ref={carouselRef}
-                        >
+                        <div className="absolute z-30">
+                            <div className={`snap-x w-[643px] h-[800px] items-center bg-neutral-0 z-10 inline-flex select-none overflow-x-hidden scrollbar-hide`}
+                                ref={carouselRef}
+                            >
+                                {video_props.map((item, i) => (
+                                    <div className=" db:snap-center  snap-center tb-m:snap-start mx-5 " key={i } ref={refs[i]}>
+                                        <div className=" select-none rounded-3xl object-contain ">
+                                            {React.createElement(VideoCard, item)}
+                                        </div>
 
-                            {cards.map((item, i) => (
-                                <div className=" db:snap-center  snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
-                                    <div className=" select-none rounded-3xl object-contain ">
-                                        <VideoCard />
                                     </div>
+                                ))}
 
-                                </div>
-                            ))}
-
-
+                            </div>
                         </div>
-                        <div className={`snap-x w-[1279px] h-screen top-24 absolute inline-flex gap-[9.25rem] select-none overflow-x-hidden scrollbar-hide`}
+                        <div className={`snap-x w-[1279px] h-[800px] items-center flex gap-[160px] select-none overflow-x-hidden scrollbar-hide`}
                             ref={carouselRef2}
 
                         >
 
-                            {cards.map((item, i) => (
-                                <>
-
-                                    <div
-                                        className={`${isScrollActive ? '-translate-y-36' : ''}
-                                       transition-all duration-[1500ms] h-screen db:snap-center z-[1] snap-center tb-m:snap-start mx-5 shrink-0`}
-                                        key={i}
-                                        ref={refs2[i]}
-                                    >
-                                        <div className="select-none rounded-3xl object-contain">
-                                            <SideCard />
-                                            {i}x
+                            {cards.map((item, i) => {
+                             
+                                // toggleBoolean();
+                                return (
+                                    <>
+
+                                        <div
+                                            className={`${isScrollActive ? '' : '-translate-y-36'} transition-all duration-[1500ms]  z-[1] snap-center tb-m:snap-start `}
+                                            key={i + 'x'}
+                                            ref={refs2[i]}
+                                        >
+                                            <div className="select-none rounded-3xl object-contain">
+                                                <SideCard />
+
+                                            </div>
                                         </div>
-                                    </div>
-                                   
-                                    <div
-                                        className={`${isScrollActive ? 'translate-y-36' : ''}
-                                       transition-all duration-[1500ms] h-screen db:snap-center z-[1] snap-center tb-m:snap-start mx-5 shrink-0`}
-                                        key={i}
-                                        ref={refs2[i]}
-                                    >
-                                        <div className="select-none rounded-3xl object-contain">
-                                            <SideCard />
-                                            {i}z
+                                        <div
+                                            className={`${isScrollActive ? ' opacity-0' : ''} transition-all duration-[1500ms]   z-[1] snap-center tb-m:snap-start mx-5 `}
+                                            key={i + 'y'}
+                                            ref={refs2[i]}
+                                        >
+                                            <div className="select-none rounded-3xl object-contain">
+                                                <SideCard />
+
+                                            </div>
                                         </div>
-                                    </div>
-                                </>
-                            ))}
+                                        <div
+                                            className={`${isScrollActive ? '' : 'translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-5 `}
+                                            key={i + 'z'}
+                                            ref={refs2[i]}
+                                        >
+                                            <div className="select-none rounded-3xl object-contain">
+                                                <SideCard />
+
+                                            </div>
+                                        </div>
+
+
+                                    </>
+                                )
+                            })}
 
                         </div>
                     </div>

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

@@ -1,4 +1,5 @@
 export {default as Carousel} from './carousel';
 export {default as CarouselCard} from './carouselCard';
 export {default as HomepageCarousel} from './homepageCarousel';
-export {default as HomepageCarousel2} from './homeCarousel2';
+export {default as HomepageCarouselPrimary} from './homeCarousel';
+export {default as CustomCarousel} from './customCarousel';

package/src/HDS/components/Footers/v3Footer.js

@@ -54,7 +54,7 @@ const socialShare = [
   },
 ]
 
-export default function V3Header(props) {
+export default function V3Footer(props) {
   const [isError, setIsError] = useState(false);
   const [isItems, setIsItems] = useState(null);
   useEffect(() => {
@@ -118,3 +118,187 @@ export default function V3Header(props) {
     </div>
   )
 }
+
+
+V3Footer.defaultProps = {
+  brandUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1686659126/website%20v3/hasura-primary_y9cdnn.svg',
+  brandAlt: 'Hasura',
+  brandLink: 'https://hasura.io/',
+  footerLinks: [
+    {
+      title: 'Platform',
+      links: [
+        {
+          linkText: 'Hasura CE Edition',
+          linkUrl: 'https://hasura.io/opensource/',
+        },
+        {
+          linkText: 'Hasura EE',
+          linkUrl: 'https://hasura.io/enterprise/',
+        },
+        {
+          linkText: 'Hasura Cloud',
+          linkUrl: 'https://hasura.io/cloud/',
+        },
+        {
+          linkText: 'Pricing',
+          linkUrl: 'https://hasura.io/pricing/',
+        },
+      ]
+    },
+    {
+      title: 'Capabilities',
+      links: [
+        {
+          linkText: 'Performance',
+          linkUrl: 'https://hasura.io/product/performance/',
+        },
+        {
+          linkText: 'Instant API',
+          linkUrl: 'https://hasura.io/product/instant-api/',
+        },
+        {
+          linkText: 'Authorization',
+          linkUrl: 'https://hasura.io/product/authorization/',
+        },
+        {
+          linkText: 'API Security',
+          linkUrl: 'https://hasura.io/product/api-security/',
+        },
+        {
+          linkText: 'Federation',
+          linkUrl: 'https://hasura.io/product/federation/',
+        },
+        {
+          linkText: 'Observability',
+          linkUrl: 'https://hasura.io/product/observability/',
+        },
+      ]
+    },
+    {
+      title: 'Build',
+      links: [
+        {
+          linkText: 'Docs',
+          linkUrl: 'https://hasura.io/docs/latest/index/',
+        },
+        {
+          linkText: 'Hasura Hub',
+          linkUrl: 'https://hasura.io/hub/',
+        },
+        // {
+        //   linkText: 'GraphQL Hub',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Guides',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Changelog',
+          linkUrl: 'https://github.com/hasura/graphql-engine/releases/',
+        },
+        {
+          linkText: 'GraphiQL',
+          linkUrl: 'https://cloud.hasura.io/public/graphiql',
+        },
+      ]
+    },
+    {
+      title: 'Learn',
+      links: [
+        {
+          linkText: 'Blog',
+          linkUrl: 'https://hasura.io/blog/',
+        },
+        // {
+        //   linkText: 'Tech Talks',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Tutorials',
+          linkUrl: 'https://hasura.io/learn/',
+        },
+        {
+          linkText: 'Events',
+          linkUrl: 'https://hasura.io/events/',
+        },
+      ]
+    },
+    {
+      title: 'Company',
+      links: [
+        {
+          linkText: 'Our Story',
+          linkUrl: 'https://hasura.io/about/',
+        },
+        // {
+        //   linkText: 'Newsroom',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Careers',
+          linkUrl: 'https://hasura.io/careers/',
+        },
+        // {
+        //   linkText: 'Partners',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Legal',
+          linkUrl: 'https://hasura.io/legal/',
+        },
+        {
+          linkText: 'Brand',
+          linkUrl: 'https://hasura.io/brand/',
+        },
+      ]
+    },
+    {
+      title: 'Connect',
+      links: [
+        {
+          linkText: 'Community',
+          linkUrl: 'https://hasura.io/community/',
+        },
+        {
+          linkText: 'Discord',
+          linkUrl: 'https://discord.com/invite/hasura',
+        },
+        // {
+        //   linkText: 'Forum',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Meetup',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Support',
+        //   linkUrl: '#',
+        // },
+      ]
+    },
+    {
+      title: 'Community',
+      links: [
+        {
+          linkText: 'Docs',
+          linkUrl: 'https://hasura.io/docs/latest/index/',
+        },
+        {
+          linkText: 'Help',
+          linkUrl: 'https://hasura.io/help/',
+        },
+        {
+          linkText: 'Github',
+          linkUrl: 'https://github.com/hasura',
+        },
+        {
+          linkText: 'Contact Sales',
+          linkUrl: 'https://hasura.io/contact-us/',
+        },
+      ]
+    },
+  ],
+}

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1178,9 +1178,27 @@ import {ReactComponent as Home03Icon } from "../../../assets/icons/home-03.svg"
 import {ReactComponent as HasuraBlueLogoIcon } from "../../../assets/V3/HasuraBlueLogo.svg"
 import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg"
 import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
+import {ReactComponent as CachingIcon } from "../../../assets/icons/caching.svg"
+import {ReactComponent as DoubleArrowIcon } from "../../../assets/icons/doubleArrow.svg"
+import {ReactComponent as EndpointsIcon } from "../../../assets/icons/endpoints.svg"
+import {ReactComponent as MutationIcon } from "../../../assets/icons/mutations.svg"
+import {ReactComponent as NetworkingIcon } from "../../../assets/icons/networking.svg"
+import {ReactComponent as QueriesIcon } from "../../../assets/icons/queries.svg"
+import {ReactComponent as RemoteIcon } from "../../../assets/icons/remote.svg"
+import {ReactComponent as TriggerIcon } from "../../../assets/icons/trigger.svg"
+import {ReactComponent as WatchTriggerIcon } from "../../../assets/icons/watchTrigger.svg"
 import {ReactComponent as HasuraLogoWhiteIcon } from "../../../assets/V3/HasuraWhite.svg"
 
 const iconReferenceMap = {
+    caching: CachingIcon,
+    doubleArrow: DoubleArrowIcon,
+    endpoint: EndpointsIcon,
+    mutation: MutationIcon,
+    networking: NetworkingIcon,
+    queries: QueriesIcon,
+    remote: RemoteIcon,
+    trigger: TriggerIcon,
+    watchTrigger: WatchTriggerIcon,
     hasura1: Hasura1Icon,
     hasura2: Hasura2Icon,
     hasura3: Hasura3Icon,

package/src/HDS/helpers/Media/mediabox.js

@@ -57,7 +57,6 @@ export default function MediaViewer ({ img_url, video_url, video_poster, width }
                 <video
                   controls={false}
                   autoPlay
-                  muted
                   className="object-contain max-w-full max-h-full"
                 >
                   <source src={video_url} type="video/mp4" />

package/src/HDS/helpers/index.js

@@ -1,3 +1,2 @@
 export * from './Translations';
 export * from './Media';
-export * from './Sliders'

package/src/HDS/modules/TextCard/textIconCard.js

@@ -14,30 +14,27 @@ export default function TextIconCard(props) {
           <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
           <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
           {props.button &&
-            <div className="flex gap-6 items-center">
-              {props.button.map((btn, index) => (
-                <a href={btn.cta_link} key={index} className="flex ">
-                  <HDSButton
-                    label={btn.cta_text}
-                    type={btn.cta_type || 'secondary'}
-                    leftIconVariant='none'
-                    rightIconVariant='none'
-                    state='default'
-                    size='md'
-                    rightAnimatedArrow={true}
-                    rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
-                  />
-                </a>))
-              }
-            </div>
+            <a href={props.button.cta_link} className="flex ">
+              <HDSButton
+                label={props.button.cta_text}
+                type={props.button.cta_type || 'secondary'}
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+              />
+            </a>
           }
+
       </div>
       <div className="flex-1 pt-14 tb-m:pt-0">
         {
           props.iconCards.map((card, index) => (
-            <div className="tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
-              <div className={`${HDSColor(card.iconBg)} w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
-                <Icon height={'h-6 w-6'} variant={card.iconVariant} strokeClass={`${HDSColor(card.iconStrokeClass)}`} />
+            <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
+              <div className={`bg-blue-300 w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
+                <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
               </div>
               <div>
               <Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
@@ -49,4 +46,4 @@ export default function TextIconCard(props) {
       </div>
     </div>
   )
-}
+}