hds-web 1.8.5 → 1.8.7

package/package.json

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

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

@@ -14,11 +14,23 @@ const AvatarVariant = {
     'square': 'rounded-lg',
 }
 
-export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant }) {
+const ProfileAvatarVariant = {
+    'default': {
+        'titleTextStyle': 'text-hds-m-body2c-bold tb:text-hds-t-body2c-bold db:text-hds-d-body2c-bold',
+        'desgnTextStyle': 'text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c'
+    },
+    'secondary': {
+        'titleTextStyle': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
+        'desgnTextStyle': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2'
+    }
+}
+
+export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant, avatarType }) {
     const imgSizeClass = imgSizes[size] || imgSizes.md;
     const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
+    const AvType = avatarType || 'default';
 
     return (
         <div className="group block flex-shrink-0">
@@ -28,6 +40,7 @@ export default function ProfileAvatar({avatarBgColor, name, designation, size, i
                         <img
                             className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
                             src={imageUrl}
+                            alt={name}
                         />
                     ) : (
                         <Icon
@@ -38,8 +51,8 @@ export default function ProfileAvatar({avatarBgColor, name, designation, size, i
                     )}
                 </div>
                 <div className="ml-3">
-                        <Typography textStyle='body2c-bold' className={` text-neutral-800`}>{name}</Typography>
-                        <Typography textStyle='body3c' className={` text-neutral-500`}>{designation}</Typography>
+                    <div className={`${ProfileAvatarVariant[AvType]['titleTextStyle']} text-neutral-800`}>{name}</div>
+                    <div className={`${ProfileAvatarVariant[AvType]['desgnTextStyle']} text-neutral-600`}>{designation}</div>
                 </div>
             </div>
         </div>

package/src/HDS/components/Cards/CommunityCard/communityCard.js

@@ -1,14 +1,22 @@
 import React from "react";
 import { Typography } from '../../../foundation/Typography'
 
+const Twitter = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.67602 24.7482C16.8006 24.7482 21.2437 18.0172 21.2437 12.1806C21.2437 11.9893 21.2398 11.7991 21.2309 11.6096C22.0934 10.9861 22.8431 10.208 23.4345 9.32253C22.6431 9.67415 21.7914 9.91094 20.8979 10.0177C21.8098 9.47092 22.5101 8.60557 22.8404 7.5742C21.9868 8.08033 21.0417 8.44812 20.0358 8.64646C19.2294 7.78796 18.0815 7.25098 16.8114 7.25098C14.3718 7.25098 12.3935 9.22924 12.3935 11.6676C12.3935 12.0143 12.4325 12.3513 12.5079 12.6747C8.83714 12.4903 5.58191 10.7325 3.4036 8.06001C3.02381 8.71257 2.80515 9.47116 2.80515 10.2799C2.80515 11.8123 3.58504 13.1652 4.77092 13.9568C4.04637 13.9345 3.36564 13.7352 2.77038 13.4042C2.7694 13.4225 2.7694 13.4411 2.7694 13.4605C2.7694 15.5999 4.29221 17.3859 6.31308 17.7907C5.94211 17.8918 5.55179 17.9462 5.14875 17.9462C4.86421 17.9462 4.58752 17.9178 4.31841 17.8666C4.88062 19.6213 6.51142 20.8985 8.44486 20.9345C6.93283 22.1194 5.02827 22.8253 2.95892 22.8253C2.60265 22.8253 2.25102 22.805 1.90527 22.7641C3.86002 24.0168 6.18109 24.7482 8.67602 24.7482Z" fill="#00acee" />
+  </svg>
+)
+
 export default function CommunityCard(props) {
     
-    return (
-      <div className="p-5 tb:p-8 bg-neutral-0 shadow-sm rounded-3xl">
-        <Typography textStyle="h5" as="h5" className="text-neutral-1000">{props.name}</Typography>
-        <Typography textStyle="body1-medium" className="text-neutral-500 pb-4">{props.designation}</Typography>
+  return (
+    <a href={props.linkUrl}>
+      <div className="p-5 tb:p-8 bg-neutral-0 shadow-sm rounded-3xl mx-5">
+        <Twitter />
+        <Typography textStyle="h5" as="h5" className="text-neutral-1000 py-4">{props.name}</Typography>
         <Typography textStyle="body1" className="text-neutral-500">{props.tweets}</Typography>
       </div>
-    )
+    </a>
+  )
 
 }

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

@@ -2,24 +2,59 @@ import React from "react";
 import {HDSColor} from '../../../foundation/ColorPalette'
 import { ProfileAvatar } from '../../Avatars'
 import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
 
 
 export default function FeedbackCard(props) {
   return (
     <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
-      <div className='pb-8'>
-        <img src={props.brandImgUrl} alt={props.brandImgAlt} className=' h-8 '/>
-      </div>
-      <div className="pb-10">
-        <Typography textStyle="quote" className='text-neutral-1000'>{props.description}</Typography>
-      </div>
       <ProfileAvatar
         name={props.speakerName}
         size='md'
         designation={props.speakerDesignation}
         imageUrl={props.speakerImgUrl}
-        avatarVariant="square"
+        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>
+
+      </div>
+      <div className='pb-8'>
+        
+      </div>
+      
+      
     </div>
   )
 }

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

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+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>
+                {/* <div className='relative mx-auto top-[442.72px] w-[151.7px] h-[3.1px] bg-neutral-0/20' /> */}
+            </div>
+        </>)
+}

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

@@ -0,0 +1 @@
+export { default as VideoCard } from './homeVC';

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

@@ -8,3 +8,4 @@ export * from './TalkDetailCard';
 export * from './ImageSlider';
 export * from './CommunityCard';
 export * from './Announcement';
+export * from './VideoCard';

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

@@ -0,0 +1,316 @@
+import React from "react";
+import { useRef, useState } from "react";
+import { Icon } from "../common-components/Icon";
+import { HDSButton } from "../Buttons";
+import { VideoCard } from '../Cards/VideoCard'
+const carouselItems = [
+    {
+        name: "John Smith",
+        designation: "CEO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Jane Doe",
+        designation: "CTO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Bob Johnson",
+        designation: "COO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Bob Johnson",
+        designation: "COO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    }
+];
+const carouselItems2 = [
+    {
+        name: "John Smith",
+        designation: "CEO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Jane Doe",
+        designation: "CTO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Bob Johnson",
+        designation: "COO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Bob Johnson",
+        designation: "COO",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    },
+    {
+        name: "Gourav",
+        designation: "SDE",
+        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
+        size: 'w-full'
+    }
+];
+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>
+    </div>
+)
+export default function HomePageCarousel2(props) {
+    const {
+        cards = carouselItems,
+        cards2 = carouselItems2,
+    } = props;
+
+
+    const carouselRef = useRef(null); // Create a ref using useRef
+    const carouselRef2 = useRef(null); // Create a ref using useRef
+    const [currentCard, setCurrentCard] = React.useState(0);
+    const refs = cards.reduce((acc, val, i) => {
+        acc[i] = React.createRef();
+        return acc;
+    }, {});
+    const refs2 = cards2.reduce((acc, val, i) => {
+        acc[i] = React.createRef();
+        return acc;
+    }, {});
+
+
+
+    const totalCards = carouselItems.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",
+            });
+            carouselRef2.current.scrollTo({
+                left: carouselRef2.current.scrollLeft + carouselRef2.current.children[0].offsetWidth * scrollByAmount,
+                behavior: "smooth",
+            });
+        }
+        else {
+            setCurrentCard(0);
+            carouselRef.current.scrollTo({
+                left: 0,
+                behavior: "smooth",
+            });
+            carouselRef2.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 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 => (
+        <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>
+    );
+    const [isScrollActive, setScrollActive] = useState(false);
+
+    const handleMouseEnter = () => {
+        setScrollActive(true); // Mouse entered, scroll is active
+    };
+
+    const handleMouseLeave = () => {
+        setScrollActive(false); // Mouse left, scroll is inactive
+    };
+    return (
+        <div className=""
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            <div className="hidden tb:flex tb:flex-col-reverse">
+                <div className="flex absolute top-[33rem] 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="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}
+                        >
+
+                            {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 className={`snap-x w-[1279px] h-screen top-24 absolute inline-flex gap-[9.25rem] 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
+                                        </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>
+                                    </div>
+                                </>
+                            ))}
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+};
+

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

@@ -5,28 +5,8 @@ import { HDSButton } from "../Buttons";
 export default function HomePageCarousel(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;
@@ -146,8 +126,8 @@ export default function HomePageCarousel(props) {
             </div>
 
 
-            <div className="hidden tb:flex tb:flex-col">
-                <div className="flex pb-12 items-center justify-end ">
+            <div className="hidden tb:flex tb:flex-col-reverse">
+                <div className="flex pt-10 justify-center items-center">
                     {/* {slider()} */}
                     <div className="flex">
                         {sliderControl(true)}
@@ -155,19 +135,7 @@ export default function HomePageCarousel(props) {
                     </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`}
@@ -175,7 +143,6 @@ export default function HomePageCarousel(props) {
                         >
 
                             {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=" db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={i} ref={refs[i]}>
                                     <div className="w-full select-none rounded-3xl object-contain">
                                         {React.createElement(props.component, item)}
@@ -183,6 +150,12 @@ export default function HomePageCarousel(props) {
 
                                 </div>
                             ))}
+                            <div className="db:snap-center snap-center tb-m:snap-start mx-5 shrink-0" key={totalCards}>
+                                <div className="w-full select-none rounded-3xl object-contain">
+                                    {React.createElement(props.component, props.cards[0])}
+                                </div>
+                            </div>
+                        
 
                         </div>
                     </div>

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

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

package/src/HDS/helpers/Sliders/index.js

@@ -0,0 +1 @@
+export { default as ScrollSlider } from './scrollSlider';