hds-web 1.8.8 → 1.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Avatars/profileAvatar.js

@@ -8,6 +8,7 @@ const imgSizes = {
     'sm': 'h-10 w-10',
     'md': 'h-12 w-12 min-w-[48px]',
     'lg': 'h-[60px] w-[60px]',
+    'xl': 'h-16 w-16',
 }
 const AvatarVariant = {
     'circular': 'shadow rounded-full ',

package/src/HDS/components/BadgesCaption/badges.js

@@ -23,6 +23,7 @@ const colorVariants = {
   cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300   ',
   cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
   green: 'bg-green-200 text-green-800 group-hover:bg-green-300  ',
+  purple500: 'bg-purple-500 shadow-sm'
 }
 
 export default function Badge({
@@ -35,6 +36,7 @@ export default function Badge({
   size,
   children,
   color,
+  text_color,
   onClick
 }) {
   const [isClicked, setIsClicked] = useState(false);
@@ -58,7 +60,7 @@ export default function Badge({
             <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
           </div>
         )}
-        <Typography textStyle='body3c'>{children}</Typography>
+        <Typography textStyle='body3c' className={HDSColor(text_color)}>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -7,54 +7,51 @@ import { HDSButton } from "../../Buttons";
 
 export default function FeedbackCard(props) {
   return (
-    <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
-      <ProfileAvatar
-        name={props.speakerName}
-        size='md'
-        designation={props.speakerDesignation}
-        imageUrl={props.speakerImgUrl}
-        avatarVariant="circle"
-        avatarType="secondary"
-        
-      />
-      <div className={((props.dividerClass) ? "py-8" : "py-6")}>
-        <Typography textStyle={((props.dividerClass) ? "sub2" : "sub1")} className='text-neutral-1000'>{props.description}</Typography>
-      </div>
-      {
-        props.dividerClass && (
-          <div className={`${HDSColor(props.dividerClass)} my-2`}></div>
-        )
-      }
-      <div className={"mb-s:flex items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
-        <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl" + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px]")}>
-          <img src={props.brandImgUrl} alt={props.brandImgAlt}/>
-        </div>
-        <div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s:pl-8")}>
-          <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
-          <a href={props.caseStudyUrl} className="flex">
-            <HDSButton
-              label='Read casestudy'
-              type='secondaryLink'
-              leftIconVariant='none'
-              rightIconVariant='none'
-              state='default'
-              size='md'
-              rightAnimatedArrow={true}
-              rightAnimatedArrowColor='#3970FD'
-              className='mt-0 justify-start'
-              btnTextColorClass='text-blue-500'
-              btnTextHoverClass= 'hover:text-blue-500'
-              animatedHoverStroke= 'group-hover:stroke-blue-500'
-            />
-          </a>
+    <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10 grid mb-6 db-s:mb-0 last:mb-0 flex-1 max-w-[920px] mx-auto flex-col'>
+      <div className=" self-start">
+        <ProfileAvatar
+          name={props.speakerName}
+          size='xl'
+          designation={props.speakerDesignation}
+          imageUrl={props.speakerImgUrl}
+          avatarVariant="circle"
+          avatarType="secondary"
+        />
+        <div className={((props.dividerClass) ? "py-8" : "py-6")}>
+          <Typography textStyle='sub1' className='text-neutral-1000'>{props.description}</Typography>
         </div>
-
       </div>
-      <div className='pb-8'>
-        
+      <div className=" self-end">
+        {
+          props.dividerClass && (
+            <div className={`${HDSColor(props.dividerClass)} mb-2`}></div>
+          )
+        }
+        <div className={"mb-s:flex items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
+          <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl" + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px]")}>
+            <img className="max-h-[20px]" src={props.brandImgUrl} alt={props.brandImgAlt}/>
+          </div>
+          <div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s:pl-8")}>
+            <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
+            <a href={props.caseStudyUrl} className="flex">
+              <HDSButton
+                label='Read casestudy'
+                type='secondaryLink'
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor='#3970FD'
+                className='mt-0 justify-start'
+                btnTextColorClass='text-blue-500'
+                btnTextHoverClass= 'hover:text-blue-500'
+                animatedHoverStroke= 'group-hover:stroke-blue-500'
+              />
+            </a>
+          </div>
+        </div>
       </div>
-      
-      
     </div>
   )
 }

package/src/HDS/components/Cards/Misc/imageBadgeCard.js

@@ -0,0 +1,27 @@
+export default function imageBadgeCard (card){
+
+return(
+    <>
+        <div className={`${HDSColor(card.cardBg)}bg-neutral-0 max-w-[700px] min-h-[245px] rounded-3xl p-8`}>
+            <div className='flex flex-row justify-between gap-4'>
+
+
+                <div className='max-w-[400px]'>
+
+                    <Badges
+                        color={card.badge.color}
+                        children={card.badge.label}
+                        text_color='text-neutral-0'
+                    />
+                    <Typography textStyle='h4' className='mt-2 text-neutral-1000'>{card.title}</Typography>
+                    <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
+                </div>
+                <div>
+                    <img src={card.imageUrl} alt={card.title} className='max-w-[290px] max-h-[181px]' />
+
+                </div>
+            </div>
+        </div>
+    </>
+)
+}

package/src/HDS/components/Cards/Testimonials/testimonial.js

@@ -26,8 +26,8 @@ export default function Testimonial(props) {
         return (
             <>
                 <div className={`${HDSColor(card.cardBg)} bg-neutral-1000/40 rounded-2xl max-w-[220px] min-h-[441px] flex flex-col justify-between `}>
-                    <div className="mt-8">
-                        <div className="max-w-[64px] pt-8 pl-6">
+                    <div className="">
+                        <div className=" pt-8 pl-6">
                             <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png" alt="Card" className=" inline-block w-16 " />
                         </div>
                         
@@ -36,7 +36,7 @@ export default function Testimonial(props) {
                     </div>
                     <div className="pl-6 pb-8">
                         <img
-                            className={` w-14 h-14 shadow rounded-full ${HDSColor(card.avatar.avatarBgColor)} rounded inline-block`}
+                            className={` w-14 h-14 shadow rounded-full ${HDSColor(card.avatar['avatarBgColor'])} rounded inline-block`}
                             alt='avatar'
                             src={card.img_url}
                         />
@@ -56,10 +56,10 @@ export default function Testimonial(props) {
             <div className="max-h-[441px]">
                 <div className={`${HDSColor(cardHover.cardBg)} bg-blue-500 rounded-2xl max-w-[221px] justify-between h-[442px] flex flex-col`}>
                     <div className=" ">
-                        <div className="max-w-[148px] pt-8 pl-6 ">
-                            <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png" alt="Card" className=" inline-block max-w-[150px] h-[18.52px] pl-6 pr-12 pt-8" />
+                        <div className="pt-8 pl-6 pr-12 ">
+                            <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686760719/website%20v3/hascon_t5kwrf.png" alt="Card" className=" inline-block w-full" />
                         </div>
-                        <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0">{cardHover.title}</div>
+                        <div className="mt-6 px-6 text-xl leading-[27px] font-semibold text-neutral-0">{cardHover.title}</div>
 
                     </div>
                     <div className="flex pb-8 pl-6 pt-5">
@@ -85,6 +85,7 @@ export default function Testimonial(props) {
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
         >
+           
             <div className={`transition-all max-w-[220px] fixed ease-in-out duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
                 <Card1 />
             </div>
@@ -98,6 +99,7 @@ export default function Testimonial(props) {
 Testimonial.defaultProps = {
     card: {
         cardBg: '',
+        img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
         title_img: "Optum",
         img_alt: 'optum',
         subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
@@ -110,7 +112,7 @@ Testimonial.defaultProps = {
     },
     cardHover: {
         cardBg: 'bg-green-500',
-        img_url: '',
+        img_url:'',
         img_alt: '',
         title: 'Optum goes from concept to production in 100 days with Hasura',
         button: {

package/src/HDS/components/Cards/VideoCard/homeVC.js

@@ -1,43 +1,31 @@
 import React, { useState } from 'react';
-import { MediaBox } from '../../../helpers/Media';
 import { Testimonial } from '../Testimonials';
 
 export default function HomeVC(props) {
-
-
     return (
         <>
-
             <div className='carouselShadow'>
                 <div className='w-[643.51px] h-[472.64px] bg-base-1000 rounded-2xl flex flex-col items-center justify-center border-2 border-neutral-300'>
-
-                    {/* <div className='w-[598.55px] h-[449.94px] border-x-2 border-neutral-800 bg-base-1000 rounded-lg grid grid-cols-2  '>
-                        <div className='relative bg-neutral-0 w-full h-full'></div>
-                        <div className='relative bg-yellow-100 w-[221px] justify-self-end h-full'></div>
-                    </div>
-                    <div className='w-[598.55px] h-[449.94px] border-x-2 border-neutral-800 bg-base-1000 rounded-lg grid grid-cols-2  '>
-                        <div className='relative bg-neutral-0 w-full h-full'></div>
-                        <div className='relative bg-yellow-100 w-[221px] justify-self-end h-full'></div>
-                    </div>
-                    <div className='w-[598.55px] h-[449.94px] border-x-2 border-neutral-800 bg-base-1000 rounded-lg grid grid-cols-2  '>
-                        <div className='relative bg-neutral-0 w-full h-full'></div>
-                        <div className='relative bg-yellow-100 w-[221px] justify-self-end h-full'></div>
-                    </div> */}
-                    <div className='relative'>
+                    <div className='absolute'>
                         <div>
                             <video
-                              
-                                autoPlay={true}
-                                className="object-contain max-w-full max-h-full"
-                                src='https://nutrien-prod-asset.s3.us-east-2.amazonaws.com/s3fs-public/video-thumbnails/2019-05/Nutrien-Banner-Loop-V4.mp4 ' />
+                                autoPlay
+                                loop
+                                className="object-contain max-w-full max-h-full px-1"
+                                src={props.video_url} 
+                                />
                         </div>
-                        <div className='relative -top-[400px] left-[410px] filter-[16px]'>
+                        <div className='fixed top-[15px] left-[415px]  filter-[16px]'>
 
-                            <Testimonial />
+                            <Testimonial {...props.testimonial}/>
                         </div>
                     </div>
                 </div>
                 {/* <div className='relative mx-auto top-[442.72px] w-[151.7px] h-[3.1px] bg-neutral-0/20' /> */}
             </div>
         </>)
+}
+
+HomeVC.defaultProps= {
+    
 }

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

@@ -0,0 +1,193 @@
+import React from "react";
+import { useRef, useState } from "react";
+import { Icon } from "../common-components/Icon";
+import { HDSButton } from "../Buttons";
+export default function CustomCarousel(props) {
+    const carouselRef = useRef(null); // Create a ref using useRef
+    const [currentCard, setCurrentCard] = React.useState(0);
+    const [touchStart, setTouchStart] = React.useState(0);
+    const [touchEnd, setTouchEnd] = React.useState(0);
+    const [showAllCards, setShowAllCards] = useState(false);
+
+    const handleTouchStart = e => {
+        setTouchStart(e.targetTouches[0].clientX);
+    };
+
+    const handleTouchMove = e => {
+        setTouchEnd(e.targetTouches[0].clientX);
+    };
+
+    const handleTouchEnd = () => {
+        if (touchStart - touchEnd > 150) {
+            nextCard();
+        }
+
+        if (touchStart - touchEnd < -150) {
+            previousCard();
+        }
+    };
+
+    const refs = props.cards.reduce((acc, val, i) => {
+        acc[i] = React.createRef();
+        return acc;
+    }, {});
+
+
+
+    const totalCards = props.cards.length;
+
+    const nextCard = () => {
+        let scrollByAmount = 1;
+
+        if (currentCard < totalCards - scrollByAmount) {
+            setCurrentCard(currentCard + scrollByAmount);
+            carouselRef.current.scrollTo({
+                left: carouselRef.current.scrollLeft + carouselRef.current.children[0].offsetWidth * scrollByAmount,
+                behavior: "smooth",
+            });
+        }
+        else {
+            setCurrentCard(0);
+            carouselRef.current.scrollTo({
+                left: 0,
+                behavior: "smooth",
+            });
+        }
+    };
+
+    const previousCard = () => {
+        let scrollByAmount = 1;
+       
+        if (currentCard > 0) {
+            setCurrentCard(currentCard - scrollByAmount);
+            carouselRef.current.scrollTo({
+                left: carouselRef.current.scrollLeft - carouselRef.current.children[0].offsetWidth * scrollByAmount,
+                behavior: "smooth",
+            });
+        } else {
+            const lastCardIndex = totalCards - 1;
+            const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
+            setCurrentCard(lastCardIndex);
+            carouselRef.current.scrollTo({
+                left: scrollLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+
+    const maxVisibleCards = 6;
+
+    const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 shadow hover:bg-neutral-0 flex items-center justify-center';
+
+    const sliderControl = isLeft => (
+        <button
+            type="button"
+            onClick={isLeft ? previousCard : nextCard}
+            className={`flex  ${arrowStyle} ${isLeft ? '' : ''}`}
+
+        >
+            <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
+                {isLeft ?
+
+                    <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
+
+                    :
+
+                    <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
+
+                }
+            </span>
+        </button>
+    );
+    return (
+        <div className="">
+            <div className="block tb:hidden">
+                {showAllCards
+                    ? props.cards.map((item, i) => (
+                        <div className="my-5" key={i} ref={refs[i]}>
+                            <div className="rounded-3xl overflow-hidden">
+                                {React.createElement(props.component, item)}
+                            </div>
+                        </div>
+                    ))
+                    : props.cards.slice(0, maxVisibleCards).map((item, i) => (
+                        <div className="my-5" key={i} ref={refs[i]}>
+                            <div className="rounded-3xl overflow-hidden">
+                                {React.createElement(props.component, item)}
+                            </div>
+                        </div>
+                    ))}
+                {props.cards.length > maxVisibleCards && (
+                    <div className="flex">
+                        <HDSButton
+                            label={showAllCards ? "View less" : "View more"}
+                            type='secondary'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow={true}
+                            rightAnimatedArrowColor='#1E56E3'
+                            animatedHoverStroke='group-hover:stroke-neutral-0'
+                            className='flex'
+                            btnTextColorClass='text-blue-600'
+                            btnBgColorClass=''
+                            onClick={() => setShowAllCards(!showAllCards)}
+                        />
+                        {/* <button
+                        className="text-blue-500 mt-1 cursor-pointer"
+                        onClick={() => setShowAllCards(!showAllCards)}
+                    >
+                        {showAllCards ? "View less" : "View more"}
+                    </button> */}
+                    </div>
+                )}
+            </div>
+
+
+            <div className="hidden tb:flex tb:flex-col-reverse">
+                <div className="flex items-center justify-center mt-10">
+                    {/* {slider()} */}
+                    <div className="flex">
+                        {sliderControl(true)}
+                        {sliderControl()}
+                    </div>
+                </div>
+                <div className="justify-center select-none  items-center"
+                    onTouchStart={handleTouchStart}
+                    onTouchMove={handleTouchMove}
+                    onTouchEnd={handleTouchEnd}
+                    onMouseDown={e => setTouchStart(e.clientX)}
+                    onMouseUp={e => {
+                        if (touchStart - e.clientX > 50) {
+                            nextCard();
+                        }
+
+                        if (touchStart - e.clientX < -50) {
+                            previousCard();
+                        }
+                    }}
+                >
+                    <div className="">
+                        <div className={`snap-x w-full inline-flex select-none overflow-x-hidden scrollbar-hide`}
+                            ref={carouselRef}
+                        >
+
+                            {props.cards.map((item, i) => (
+                                // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
+                                <div className=" snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
+                                    <div className="w-full select-none rounded-3xl object-contain">
+                                        {React.createElement(props.component, item)}
+                                    </div>
+
+                                </div>
+                            ))}
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+};

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

@@ -127,6 +127,97 @@ 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="h-full">
 
@@ -140,13 +231,13 @@ const SideCard = () => (
         </div>
     </div>
 )
-export default function HomePageCarousel2(props) {
+export default function HomePageCarousePrimary(props) {
     const {
         cards = carouselItems,
         cards2 = carouselItems2,
     } = props;
 
-    const [boolean, setBoolean] = React.useState(false);
+    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);
@@ -193,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;
@@ -209,6 +303,12 @@ 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",
+            });
         }
     };
 
@@ -267,10 +367,10 @@ export default function HomePageCarousel2(props) {
                             <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}
                             >
-                                {cards.map((item, i) => (
-                                    <div className=" db:snap-center  snap-center tb-m:snap-start mx-5 " key={i + 'cards1'} ref={refs[i]}>
+                                {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 ">
-                                            <VideoCard />
+                                            {React.createElement(VideoCard, item)}
                                         </div>
 
                                     </div>
@@ -284,7 +384,7 @@ export default function HomePageCarousel2(props) {
                         >
 
                             {cards.map((item, i) => {
-
+                             
                                 // toggleBoolean();
                                 return (
                                     <>
@@ -300,7 +400,7 @@ export default function HomePageCarousel2(props) {
                                             </div>
                                         </div>
                                         <div
-                                            className={`${isScrollActive && i % 2 === 0 ? '' : ''} transition-all duration-[1500ms]   z-[1] snap-center tb-m:snap-start mx-5 `}
+                                            className={`${isScrollActive ? ' opacity-0' : ''} transition-all duration-[1500ms]   z-[1] snap-center tb-m:snap-start mx-5 `}
                                             key={i + 'y'}
                                             ref={refs2[i]}
                                         >

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';