hds-web 1.9.8 → 1.9.9

package/package.json

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

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

@@ -7,11 +7,6 @@ import { HDSButton } from "../../Buttons";
 
 
 export default function Testimonial(props) {
-    const {
-        card,
-        cardHover
-    } = props;
-
 
     const [isHovered, setIsHovered] = useState(false);
 
@@ -22,27 +17,30 @@ export default function Testimonial(props) {
     const handleMouseLeave = () => {
         setIsHovered(false);
     };
-    const Card1 = () => {
+
+
+    const Card1 = (card) => {
+        card = card.card;
         return (
             <>
-                <div className={`${HDSColor(card.cardBg)} backdrop-blur-lg bg-neutral-1000 bg-opacity-20  rounded-2xl max-w-[220px] h-[428px] flex flex-col justify-between `}>
+                <div className={` backdrop-blur-lg bg-neutral-1000 bg-opacity-20  rounded-2xl max-w-[220px] h-[428px] 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 " />
+                            <img src={card.title_img} alt="Card" className=" inline-block w-16 " />
                         </div>
-                        
-                       
-                        <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0 ">{card.subtitle}</div>
+
+
+                        {card.subtitle && <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`}
+                        {card.avatar.img_url && <img
+                            className={` w-14 h-14 shadow rounded-full ${(card.avatarBgColor ?? 'bg-neutral-0')} rounded inline-block`}
                             alt='avatar'
-                            src={card.img_url}
-                        />
+                            src={card.avatar.img_url}
+                        />}
                         <div className=" pt-3">
-                            <Typography textStyle='body2c-bold' className={` text-neutral-0`}>{card.avatar.name}</Typography>
-                            <Typography textStyle='body3c' className={` text-neutral-0 mt-1`}>{card.avatar.designation}</Typography>
+                            {card.avatar && card.avatar.name && <Typography textStyle='body2c-bold' className={` text-neutral-0`}>{card.avatar.name}</Typography>}
+                            {card.avatar && card.avatar.designation && <Typography textStyle='body3c' className={` text-neutral-0 mt-1`}>{card.avatar.designation}</Typography>}
                         </div>
                     </div>
 
@@ -51,13 +49,14 @@ export default function Testimonial(props) {
         );
     };
 
-    const Card2 = () => {
+    const Card2 = (cardHover) => {
+        cardHover = cardHover.cardHover;
         return (
             <div className="h-[428px]">
-                <div className={`${HDSColor(cardHover.cardBg)} rounded-2xl max-w-[221px] justify-between h-[442px] flex flex-col`}>
+                <div className={`${HDSColor(cardHover.cardBg)} rounded-2xl max-w-[221px] justify-between h-[428px] flex flex-col`}>
                     <div className=" ">
-                        <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 className="pt-8 pl-6 ">
+                            <img src={cardHover.img_url} alt="Card" className=" inline-block max-w-[148px]" />
                         </div>
                         <div className="mt-6 px-6 text-xl leading-[27px] font-semibold text-neutral-0">{cardHover.title}</div>
 
@@ -85,12 +84,12 @@ 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 />
+                <Card1 card={props.card} />
             </div>
             <div className={`transition-al fixed ease-in-out duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
-                <Card2 />
+                <Card2 cardHover={props.cardHover} />
             </div>
         </div>
     );
@@ -112,7 +111,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,11 +1,12 @@
 import React from 'react';
 import { Testimonial } from '../Testimonials';
+import {FeedbackCard} from '../Feedback'
 
 export default function HomeVC(props) {
     return (
         <>
-            <div className='carouselShadow'>
-                <div className='w-[620px] h-[476px] bg-base-1000 rounded-2xl border-2 border-neutral-300 flex justify-center items-center'>
+            <div className='carouselShadow overflow-hidden'>
+                <div className=' hidden w-[620px] h-[476px] bg-base-1000 rounded-2xl border-2 border-neutral-300 tb:flex justify-center items-center'>
                     <div className='w-[580px] h-[436px] bg-base-1000 rounded flex flex-col items-center justify-center overflow-hidden'>
                         <div className=''>
                             <div className=''>
@@ -17,17 +18,54 @@ export default function HomeVC(props) {
                                     src={props.video_url}
                                 />
                                 <div className='w-full fixed flex-col flex items-center'>
-                                    <div className='fixed mx-auto top-[451px] w-[147px] h-[3px] bg-neutral-0/20' />
+                                    <div className='fixed mx-auto top-[451px] left-[235px] w-[147px] h-[3px] bg-neutral-0/20' />
                                 </div>
                             </div>
                             <div className='fixed top-[24px] left-[375px] bg-neutral-0/40'>
 
-                                <Testimonial {...props.testimonial} />
+                                <Testimonial
+                                    card={props.testimonial.card}
+                                    cardHover={props.testimonial.cardHover}
+                                />
                             </div>
                         </div>
                     </div>
                 </div>
+                <div className='overflow-hidden h-[614px] tb:hidden'>
+                    <div className='w-screen h-[348px] bg-base-1000 rounded flex flex-col items-center justify-cente overflow-hidden'>
+
+                        <div className=''>
+                            <div className='o'>
+                                <div className=''>
+                                    <video
+                                        autoPlay
+                                        loop
+                                        muted
+                                        className=" object-fill  max-w-full max-h-full scale-[1.7]"
+                                        src={props.video_url}
+                                    />
+
+                                </div>
+                                <div className='absolute z-50 top-[72px] px-4'>
+
+                                    < FeedbackCard
+                                        brandImgUrl={props.testimonial.card.title_img}
+                                        brandImgAlt={props.testimonial.card.avatar.name}
+                                        description={props.testimonial.card.subtitle}
+                                        speakerName={props.testimonial.card.avatar.name}
+                                        speakerDesignation={props.testimonial.card.avatar.designation}
+                                        speakerImgUrl={props.testimonial.card.avatar.img_url}
+                                        blurb={props.testimonial.cardHover.title}
+                                        dividerClass='border-b border-neutral-150'
+                                        caseStudyUrl={props.testimonial.cardHover.button.cta_text}
+                                    />
+                                </div>
+                            </div>
+                        </div>
 
+
+                    </div>
+                </div>
             </div>
         </>)
 }

package/src/HDS/helpers/Effects/HoverEffects/card3d.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+
+
+const CardHoverEffect = ({ children }) => {
+    const cardRef = useRef(null);
+    let bounds;
+
+    useEffect(() => {
+        const cardElement = cardRef.current;
+
+        const rotateToMouse = (e) => {
+            const mouseX = e.clientX;
+            const mouseY = e.clientY;
+            const leftX = mouseX - bounds.x;
+            const topY = mouseY - bounds.y;
+            const center = {
+                x: leftX - bounds.width / 2,
+                y: topY - bounds.height / 2
+            };
+            const distance = Math.sqrt(center.x ** 2 + center.y ** 2);
+
+            cardElement.style.transform = `
+        scale3d(1.07, 1.07, 1.07)
+        rotate3d(
+          ${center.y / 100},
+          ${-center.x / 100},
+          0,
+          ${Math.log(distance) * 2}deg
+        )
+      `;
+
+            cardElement.querySelector('.glow').style.backgroundImage = `
+        radial-gradient(
+          circle at
+          ${center.x * 2 + bounds.width / 2}px
+          ${center.y * 2 + bounds.height / 2}px,
+          #ffffff55,
+      #0000000
+        
+        )
+      `;
+        };
+
+        const handleMouseEnter = () => {
+            bounds = cardElement.getBoundingClientRect();
+            document.addEventListener('mousemove', rotateToMouse);
+        };
+
+        const handleMouseLeave = () => {
+            document.removeEventListener('mousemove', rotateToMouse);
+            cardElement.style.transform = '';
+            cardElement.style.background = '';
+        };
+
+        cardElement.addEventListener('mouseenter', handleMouseEnter);
+        cardElement.addEventListener('mouseleave', handleMouseLeave);
+
+        return () => {
+            cardElement.removeEventListener('mouseenter', handleMouseEnter);
+            cardElement.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, []);
+
+    return (
+        <div className="card" ref={cardRef}>
+            <div className="glow" />
+
+           {children}
+
+        </div>
+    );
+};
+
+export default CardHoverEffect;

package/src/HDS/helpers/Effects/HoverEffects/index.js

@@ -0,0 +1 @@
+export { default as Card3dHover} from './card3d'

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

@@ -0,0 +1 @@
+export * from './HoverEffects';

package/src/HDS/helpers/index.js

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

package/src/HDS/modules/Cards/dataSourceCard.js

@@ -5,13 +5,13 @@ import { HDSButton} from '../../components/Buttons';
 export default function DataSourcesCard(props) {
     return (
         <>
-            <div className="flex flex-col-reverse px-6 py-10 tb:px-0 tb:py-0 tb:flex-row tb:gap-[132px]">
+            <div className="flex flex-col-reverse px-6 py-10 db:px-0 db:py-0 db:flex-row db:gap-[132px]">
 
-                <div className="flex flex-col tb:pl-20 tb:py-[104px]">
+                <div className="flex flex-col db:pl-20 db:pt-[104px] db:pb-[74px]">
                     {props.title && props.description
                         && (<div className="flex flex-col gap-4">
-                            <Typography textStyle='h3' className='text-neutral-1000 tb:block hidden'>{props.title}</Typography>
-                            <Typography textStyle='sub2' className='text-neutral-600 tb:mt-0 mt-4 '>{props.description}</Typography>
+                            <Typography textStyle='h3' className='text-neutral-1000 db:block hidden'>{props.title}</Typography>
+                            <Typography textStyle='sub2' className='text-neutral-600 db:mt-0 mt-4 '>{props.description}</Typography>
                         </div>)}
                     {props.CTA &&
                         <div className="mt-4 tb:mt-6 flex">
@@ -25,16 +25,16 @@ export default function DataSourcesCard(props) {
                             </a>
                         </div>}
                 </div>
-                {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end">
+                {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end db:min-w-[550px]">
                     <video
                         autoPlay
                         loop
                         muted
                         src={props.video_url}
-                        className=" rounded-xl tb:rounded-none tb:rounded-tl-3xl"
+                        className=" rounded-xl db:rounded-none db:rounded-tl-3xl"
                     />
                 </div>}
-                <div className="tb:hidden pt-10">
+                <div className="db:hidden pb-2 pt-10">
                     <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
                 </div>
             </div>

package/src/index.css

@@ -4,6 +4,42 @@
 @tailwind utilities;
 /* Typography classes */
 
+.card {
+  max-width: 920px;
+  background-size: cover;
+  display: flex;
+  /* Add flex display */
+  flex-direction: column;
+  /* Stack elements vertically */
+  align-items: center;
+  /* Center align items horizontally */
+  justify-content: center;
+
+  position: relative;
+
+  transition-duration: 1000ms;
+  /* transition-duration: 300ms; */
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transform: rotate3d(0);
+}
+
+.card:hover {
+  transition-duration: 500ms;
+  /* transition-duration: 500ms; */
+  box-shadow: 0 5px 20px 5px #00000044;
+  border-radius: 24px;
+}
+
+.card .glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;  
+}
+
+/*test*/
 
 
 .carouselShadow{

package/src/styles/tailwind.css

@@ -969,6 +969,14 @@ select{
   top: 451px;
 }
 
+.left-\[235px\]{
+  left: 235px;
+}
+
+.top-\[72px\]{
+  top: 72px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1542,6 +1550,14 @@ select{
   height: 100vh;
 }
 
+.h-\[348px\]{
+  height: 348px;
+}
+
+.h-\[614px\]{
+  height: 614px;
+}
+
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1778,6 +1794,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[550px\]{
+  min-width: 550px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -1876,6 +1896,10 @@ select{
   max-width: min-content;
 }
 
+.max-w-\[148px\]{
+  max-width: 148px;
+}
+
 .flex-1{
   flex: 1 1 0%;
 }
@@ -2024,6 +2048,13 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-\[1\.7\]{
+  --tw-scale-x: 1.7;
+  --tw-scale-y: 1.7;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6261,6 +6292,10 @@ select{
   padding-top: 0.5rem;
 }
 
+.pt-20{
+  padding-top: 5rem;
+}
+
 .pt-3{
   padding-top: 0.75rem;
 }
@@ -7306,6 +7341,10 @@ select{
   transition-duration: 1500ms;
 }
 
+.duration-0{
+  transition-duration: 0s;
+}
+
 .ease-in{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -7320,6 +7359,44 @@ select{
 
 /* Typography classes */
 
+.card {
+  max-width: 920px;
+  background-size: cover;
+  display: flex;
+  /* Add flex display */
+  flex-direction: column;
+  /* Stack elements vertically */
+  align-items: center;
+  /* Center align items horizontally */
+  justify-content: center;
+  position: relative;
+  transition-duration: 1000ms;
+  /* transition-duration: 300ms; */
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  transition-timing-function: ease-out;
+  -webkit-transform: rotate3d(0);
+          transform: rotate3d(0);
+}
+
+.card:hover {
+  transition-duration: 500ms;
+  /* transition-duration: 500ms; */
+  box-shadow: 0 5px 20px 5px #00000044;
+  border-radius: 24px;
+}
+
+.card .glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/*test*/
+
 .carouselShadow{
   -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
           filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
@@ -8545,6 +8622,13 @@ select{
   z-index: 10;
 }
 
+.hover\:scale-110:hover{
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:scale-125:hover{
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -8651,6 +8735,10 @@ select{
           animation: spin 1s linear infinite;
 }
 
+.hover\:rounded-3xl:hover{
+  border-radius: 1.5rem;
+}
+
 .hover\:border:hover{
   border-width: 1px;
 }
@@ -9815,6 +9903,10 @@ select{
     min-width: 310px;
   }
 
+  .tb\:min-w-\[550px\]{
+    min-width: 550px;
+  }
+
   .tb\:max-w-\[17rem\]{
     max-width: 17rem;
   }
@@ -10065,6 +10157,14 @@ select{
     padding-top: 2.875rem;
   }
 
+  .tb\:pb-\[74px\]{
+    padding-bottom: 74px;
+  }
+
+  .tb\:pt-\[104px\]{
+    padding-top: 104px;
+  }
+
   .tb\:text-left{
     text-align: left;
   }
@@ -10527,6 +10627,10 @@ select{
     min-width: 400px;
   }
 
+  .tb-l\:min-w-\[550px\]{
+    min-width: 550px;
+  }
+
   .tb-l\:max-w-\[658px\]{
     max-width: 658px;
   }
@@ -10637,6 +10741,16 @@ select{
     padding-bottom: 3rem;
   }
 
+  .tb-l\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .tb-l\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .tb-l\:pb-0{
     padding-bottom: 0px;
   }
@@ -10791,6 +10905,14 @@ select{
     margin-left: 0px;
   }
 
+  .db\:mt-0{
+    margin-top: 0px;
+  }
+
+  .db\:block{
+    display: block;
+  }
+
   .db\:inline{
     display: inline;
   }
@@ -10799,6 +10921,10 @@ select{
     display: flex;
   }
 
+  .db\:hidden{
+    display: none;
+  }
+
   .db\:w-1\/2{
     width: 50%;
   }
@@ -10833,6 +10959,10 @@ select{
     min-width: 625px;
   }
 
+  .db\:min-w-\[550px\]{
+    min-width: 550px;
+  }
+
   .db\:max-w-\[488px\]{
     max-width: 488px;
   }
@@ -10857,6 +10987,10 @@ select{
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .db\:flex-row{
+    flex-direction: row;
+  }
+
   .db\:justify-start{
     justify-content: flex-start;
   }
@@ -10881,6 +11015,10 @@ select{
     gap: 10rem;
   }
 
+  .db\:gap-\[132px\]{
+    gap: 132px;
+  }
+
   .db\:gap-x-10{
     -webkit-column-gap: 2.5rem;
             column-gap: 2.5rem;
@@ -10899,6 +11037,14 @@ select{
     border-radius: 1.5rem;
   }
 
+  .db\:rounded-none{
+    border-radius: 0px;
+  }
+
+  .db\:rounded-tl-3xl{
+    border-top-left-radius: 1.5rem;
+  }
+
   .db\:p-20{
     padding: 5rem;
   }
@@ -10932,6 +11078,16 @@ select{
     padding-bottom: 1.5rem;
   }
 
+  .db\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .db\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .db\:pb-0{
     padding-bottom: 0px;
   }
@@ -10972,6 +11128,18 @@ select{
     padding-top: 8rem;
   }
 
+  .db\:pb-\[74px\]{
+    padding-bottom: 74px;
+  }
+
+  .db\:pl-20{
+    padding-left: 5rem;
+  }
+
+  .db\:pt-\[104px\]{
+    padding-top: 104px;
+  }
+
   .db\:text-left{
     text-align: left;
   }