hds-web 1.8.7 → 1.8.9

package/package.json

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

package/src/HDS/assets/icons/caching.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10.5V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H12M14 11H8M10 15H8M16 7H8"  stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.8889 14L15.4989 17.0885C15.3388 17.2955 15.2587 17.399 15.2596 17.4859C15.2603 17.5615 15.2953 17.6326 15.3545 17.6795C15.4227 17.7333 15.5536 17.7333 15.8153 17.7333H19.163C19.4307 17.7333 19.5646 17.7333 19.6331 17.7882C19.6927 17.8358 19.7272 17.9081 19.7269 17.9844C19.7265 18.0721 19.6424 18.1763 19.4742 18.3846L16.5556 22"   stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/doubleArrow.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1V17M15 17L11 13M15 17L19 13M5 17V1M5 1L1 5M5 1L9 5"  stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/endpoints.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.89706 1.5C5.82599 1.5 4.14706 3.17893 4.14706 5.25V8.64585C4.14706 9.42051 3.74856 10.1407 3.09223 10.5522L1.85161 11.33C1.63283 11.4671 1.5 11.7072 1.5 11.9654C1.5 12.2236 1.63283 12.4637 1.85161 12.6009L3.09223 13.3787C3.74856 13.7902 4.14706 14.5103 4.14706 15.285V18.75C4.14706 20.8211 5.82599 22.5 7.89706 22.5H9.75C10.1642 22.5 10.5 22.1642 10.5 21.75C10.5 21.3358 10.1642 21 9.75 21H7.89706C6.65442 21 5.64706 19.9926 5.64706 18.75V15.285C5.64706 13.9939 4.98289 12.7936 3.88901 12.1078L3.66193 11.9654L3.88901 11.8231C4.9829 11.1372 5.64706 9.93695 5.64706 8.64585V5.25C5.64706 4.00736 6.65442 3 7.89706 3H9.75C10.1642 3 10.5 2.66421 10.5 2.25C10.5 1.83579 10.1642 1.5 9.75 1.5H7.89706ZM16.3676 1.5C18.4387 1.5 20.1176 3.17893 20.1176 5.25V8.73954C20.1176 9.47556 20.4776 10.165 21.0816 10.5857L22.1787 11.35C22.38 11.4903 22.5 11.7201 22.5 11.9654C22.5 12.2108 22.38 12.4406 22.1787 12.5808L21.0816 13.3451C20.4776 13.7658 20.1176 14.4553 20.1176 15.1913V18.75C20.1176 20.8211 18.4387 22.5 16.3676 22.5H15C14.5858 22.5 14.25 22.1642 14.25 21.75C14.25 21.3358 14.5858 21 15 21H16.3676C17.6103 21 18.6176 19.9926 18.6176 18.75V15.1913C18.6176 13.9646 19.2176 12.8155 20.2242 12.1143L20.4379 11.9654L20.2242 11.8165C19.2176 11.1154 18.6176 9.96623 18.6176 8.73954V5.25C18.6176 4.00736 17.6103 3 16.3676 3H15C14.5858 3 14.25 2.66421 14.25 2.25C14.25 1.83579 14.5858 1.5 15 1.5H16.3676Z" fill="#1F2A37"/>
+</svg>

package/src/HDS/assets/icons/mutations.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 13.4468C9 12.9576 9 12.713 9.05526 12.4829C9.10425 12.2788 9.18506 12.0837 9.29472 11.9048C9.4184 11.7029 9.59136 11.53 9.93726 11.1841L19.5 1.62132C20.3285 0.792893 21.6716 0.792894 22.5 1.62132C23.3285 2.44975 23.3285 3.79289 22.5 4.62132L12.9373 14.1841C12.5914 14.53 12.4184 14.7029 12.2166 14.8266C12.0377 14.9363 11.8426 15.0171 11.6385 15.0661C11.4083 15.1213 11.1637 15.1213 10.6745 15.1213H9V13.4468Z"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5742 12.0717C20.7591 13.9135 20.3836 15.7682 19.4969 17.3931C18.6101 19.018 17.2535 20.3372 15.6045 21.1782C13.9555 22.0192 12.091 22.3428 10.2551 22.1065C8.41913 21.8703 6.69731 21.0852 5.31496 19.8541C3.93262 18.623 2.95418 17.0033 2.50771 15.2068C2.06124 13.4104 2.16754 11.5211 2.81271 9.78606C3.45787 8.05106 4.61184 6.55127 6.12355 5.48301C7.63527 4.41474 9.43429 3.82779 11.2851 3.79897"   stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/networking.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 16.6C15 16.0399 15 15.7599 15.109 15.546C15.2049 15.3578 15.3578 15.2049 15.546 15.109C15.7599 15 16.0399 15 16.6 15H19.4C19.9601 15 20.2401 15 20.454 15.109C20.6422 15.2049 20.7951 15.3578 20.891 15.546C21 15.7599 21 16.0399 21 16.6V19.4C21 19.9601 21 20.2401 20.891 20.454C20.7951 20.6422 20.6422 20.7951 20.454 20.891C20.2401 21 19.9601 21 19.4 21H16.6C16.0399 21 15.7599 21 15.546 20.891C15.3578 20.7951 15.2049 20.6422 15.109 20.454C15 20.2401 15 19.9601 15 19.4V16.6Z"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 16.6C3 16.0399 3 15.7599 3.10899 15.546C3.20487 15.3578 3.35785 15.2049 3.54601 15.109C3.75992 15 4.03995 15 4.6 15H7.4C7.96005 15 8.24008 15 8.45399 15.109C8.64215 15.2049 8.79513 15.3578 8.89101 15.546C9 15.7599 9 16.0399 9 16.6V19.4C9 19.9601 9 20.2401 8.89101 20.454C8.79513 20.6422 8.64215 20.7951 8.45399 20.891C8.24008 21 7.96005 21 7.4 21H4.6C4.03995 21 3.75992 21 3.54601 20.891C3.35785 20.7951 3.20487 20.6422 3.10899 20.454C3 20.2401 3 19.9601 3 19.4V16.6Z"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.99981 15L11.8232 9"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0002 15L12.1768 9"  stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="9" y="3" width="6" height="6" rx="1"  stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/queries.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.08997 8.99959C9.32507 8.33125 9.78912 7.76769 10.3999 7.40872C11.0107 7.04974 11.7289 6.91852 12.4271 7.0383C13.1254 7.15807 13.7588 7.52111 14.215 8.06311C14.6713 8.60512 14.921 9.29111 14.92 9.99959C14.92 11.9996 11.92 12.9996 11.92 12.9996M12 16.9996H12.01M3 7.94104V16.0582C3 16.4008 3 16.5721 3.05048 16.7249C3.09515 16.8601 3.16816 16.9842 3.26463 17.0889C3.37369 17.2072 3.52345 17.2904 3.82297 17.4568L11.223 21.5679C11.5066 21.7255 11.6484 21.8042 11.7985 21.8351C11.9315 21.8625 12.0685 21.8625 12.2015 21.8351C12.3516 21.8042 12.4934 21.7255 12.777 21.5679L20.177 17.4568C20.4766 17.2904 20.6263 17.2072 20.7354 17.0889C20.8318 16.9842 20.9049 16.8601 20.9495 16.7249C21 16.5721 21 16.4008 21 16.0582V7.94104C21 7.5984 21 7.42708 20.9495 7.27428C20.9049 7.1391 20.8318 7.01502 20.7354 6.91033C20.6263 6.79199 20.4766 6.70879 20.177 6.54239L12.777 2.43128C12.4934 2.27372 12.3516 2.19494 12.2015 2.16406C12.0685 2.13672 11.9315 2.13672 11.7985 2.16406C11.6484 2.19494 11.5066 2.27372 11.223 2.43128L3.82297 6.54239C3.52345 6.70879 3.37369 6.79199 3.26463 6.91033C3.16816 7.01502 3.09515 7.1391 3.05048 7.27428C3 7.42708 3 7.5984 3 7.94104Z"   stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/remote.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 9V14.6C5 16.8402 5 17.9603 5.43597 18.816C5.81947 19.5686 6.43139 20.1805 7.18404 20.564C8.03968 21 9.15979 21 11.4 21H12.6C14.8402 21 15.9603 21 16.816 20.564C17.5686 20.1805 18.1805 19.5686 18.564 18.816C19 17.9603 19 16.8402 19 14.6V9"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 8H21"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 3L8 8"   stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 3L16 8"   stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/trigger.svg

@@ -0,0 +1,5 @@
+<svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 19H11C11.5523 19 12 18.5523 12 18V6C12 5.44772 12.4477 5 13 5H16"  stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="3" cy="3" r="3" transform="matrix(1 0 0 -1 2 22)"  stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="3" cy="3" r="3" transform="matrix(1 0 0 -1 16 8)"   stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/watchTrigger.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 19L16.5 21L21 16.5M21.9851 12.5499C21.995 12.3678 22 12.1845 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.4354 6.33651 21.858 11.7385 21.9966M12 6V12L15.7384 13.8692"  stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -25,16 +25,18 @@ export default function Testimonial(props) {
     const Card1 = () => {
         return (
             <>
-                <div className={`${HDSColor(card.cardBg)} max-w-[220px] flex flex-col `}>
-                    <div className="mt-8">
-                        <div className="max-w-[64px] 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 h-[18.52px]" />
+                <div className={`${HDSColor(card.cardBg)} bg-neutral-1000/40 rounded-2xl max-w-[220px] min-h-[441px] flex flex-col justify-between `}>
+                    <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>
-                        <Typography textStyle='quote' className="mt-6 px-6">{card.subtitle}</Typography>
+                        
+                       
+                        <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0 ">{card.subtitle}</div>
                     </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}
                         />
@@ -51,13 +53,13 @@ export default function Testimonial(props) {
 
     const Card2 = () => {
         return (
-            <div className="">
-                <div className={`${HDSColor(cardHover.cardBg)} max-w-[221px] justify-between h-[442px] flex flex-col`}>
+            <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>
-                        <Typography textStyle='quote' className="mt-6 px-6">{cardHover.title}</Typography>
+                        <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">
@@ -79,10 +81,11 @@ export default function Testimonial(props) {
 
     return (
         <div
-            className={` ${isHovered ? '' : ''} max-w-[221px]`}
+            className={` ${isHovered ? '' : ''} max-w-[221px] rounded-2xl`}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
         >
+           
             <div className={`transition-all max-w-[220px] fixed ease-in-out duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
                 <Card1 />
             </div>
@@ -95,10 +98,11 @@ export default function Testimonial(props) {
 
 Testimonial.defaultProps = {
     card: {
-        cardBg: 'bg-green-400',
+        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: '“It took just 100 days to get our new clinical platform running… We don’t think we could have achieved this unbelievable speed without Hasura.”',
+        subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
         avatar: {
             img_url: '',
             name: 'Nagaraja Nayak',
@@ -107,8 +111,8 @@ Testimonial.defaultProps = {
         }
     },
     cardHover: {
-        cardBg: 'bg-yellow-500',
-        img_url: '',
+        cardBg: 'bg-green-500',
+        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,28 +1,31 @@
 import React, { useState } from 'react';
+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='absolute'>
+                        <div>
+                            <video
+                                autoPlay
+                                loop
+                                className="object-contain max-w-full max-h-full px-1"
+                                src={props.video_url} 
+                                />
+                        </div>
+                        <div className='fixed top-[15px] left-[415px]  filter-[16px]'>
 
+                            <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>
+    );
+};