hds-web 1.9.8 → 1.10.0

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/HDS/modules/TextCard/textIconCard.js

@@ -8,42 +8,62 @@ export default function TextIconCard(props) {
   return (
     <div className="tb-m:flex gap-14 gap-y-14  gap-x-14 tb:gap-12 db-s:gap-20 db:gap-24">
       <div className="db-s:max-w-[524px] tb-m:w-1/2 w-full">
-          <div className="pb-6 tb:pb-8 db:pb-12">
-            <img className="max-w-[210px]" src={props.imgUrl} alt={props.title} />
-          </div>
-          <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
-          <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
-          {props.button &&
-            <a href={props.button.cta_link} className="flex ">
-              <HDSButton
-                label={props.button.cta_text}
-                type={props.button.cta_type || 'secondary'}
-                leftIconVariant='none'
-                rightIconVariant='none'
-                state='default'
-                size='md'
-                rightAnimatedArrow={true}
-                rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
-              />
-            </a>
-          }
-
-      </div>
-      <div className="flex-1 pt-14 tb-m:pt-0">
         {
-          props.iconCards.map((card, index) => (
-            <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
-              <div className={`bg-blue-300 w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
-                <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
-              </div>
-              <div>
-              <Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
-              <Typography textStyle="body1" className="text-neutral-600">{card.description}</Typography>
-              </div>
-            </div>
-          ))
+          props.tagline && (
+            <Typography textStyle="h6" as="h6" className="pb-2 uppercase text-blue-400">{props.tagline}</Typography>
+          )
+        }
+        {
+          props.title && (
+            <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
+          )
+        }
+        {
+          props.description && (
+            <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
+          )
+        }
+        {props.button &&
+          <a href={props.button.cta_link} className="flex ">
+            <HDSButton
+              label={props.button.cta_text}
+              type={props.button.cta_type || 'secondary'}
+              leftIconVariant='none'
+              rightIconVariant='none'
+              state='default'
+              size='md'
+              rightAnimatedArrow={true}
+              rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+            />
+          </a>
+        }
+        {
+          props.imgUrl && (
+            <div className="pt-6 tb:pt-8 db:pt-12">
+              <img className="max-w-[210px]" src={props.imgUrl} alt={((props.title) ? props.title : "Illu")} />
+          </div>
+          )
         }
       </div>
+      {
+        props.iconCards && (
+          <div className="flex-1 pt-14 tb-m:pt-0">
+            {
+              props.iconCards.map((card, index) => (
+                <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
+                  <div className={"w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5 " + ((card.iconBgClass) ? HDSColor(card.iconBgClass) : "bg-blue-300")}>
+                    <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
+                  </div>
+                  <div>
+                  <Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
+                  <Typography textStyle="body1" className="text-neutral-600">{card.description}</Typography>
+                  </div>
+                </div>
+              ))
+            }
+          </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

@@ -913,6 +913,10 @@ select{
   left: 17.6%;
 }
 
+.left-\[235px\]{
+  left: 235px;
+}
+
 .left-\[375px\]{
   left: 375px;
 }
@@ -969,6 +973,14 @@ select{
   top: 451px;
 }
 
+.top-\[72px\]{
+  top: 72px;
+}
+
+.top-\[90px\]{
+  top: 90px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1490,6 +1502,10 @@ select{
   height: 33px;
 }
 
+.h-\[348px\]{
+  height: 348px;
+}
+
 .h-\[3px\]{
   height: 3px;
 }
@@ -1502,10 +1518,6 @@ select{
   height: 436px;
 }
 
-.h-\[442px\]{
-  height: 442px;
-}
-
 .h-\[476px\]{
   height: 476px;
 }
@@ -1518,6 +1530,10 @@ select{
   height: 60px;
 }
 
+.h-\[614px\]{
+  height: 614px;
+}
+
 .h-\[800px\]{
   height: 800px;
 }
@@ -1542,6 +1558,10 @@ select{
   height: 100vh;
 }
 
+.h-\[675px\]{
+  height: 675px;
+}
+
 .max-h-\[181px\]{
   max-height: 181px;
 }
@@ -1778,6 +1798,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[312px\]{
+  min-width: 312px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -1794,6 +1818,10 @@ select{
   max-width: 125px;
 }
 
+.max-w-\[148px\]{
+  max-width: 148px;
+}
+
 .max-w-\[15rem\]{
   max-width: 15rem;
 }
@@ -2024,6 +2052,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));
@@ -6197,10 +6232,6 @@ select{
   padding-right: 2.5rem;
 }
 
-.pr-12{
-  padding-right: 3rem;
-}
-
 .pr-2{
   padding-right: 0.5rem;
 }
@@ -6261,6 +6292,10 @@ select{
   padding-top: 0.5rem;
 }
 
+.pt-20{
+  padding-top: 5rem;
+}
+
 .pt-3{
   padding-top: 0.75rem;
 }
@@ -7282,6 +7317,10 @@ select{
   transition-delay: 300ms;
 }
 
+.duration-0{
+  transition-duration: 0s;
+}
+
 .duration-100{
   transition-duration: 100ms;
 }
@@ -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;
 }
@@ -9777,6 +9865,10 @@ select{
     height: 100%;
   }
 
+  .tb\:h-\[513px\]{
+    height: 513px;
+  }
+
   .tb\:max-h-\[181px\]{
     max-height: 181px;
   }
@@ -9803,6 +9895,10 @@ select{
     width: 100%;
   }
 
+  .tb\:w-\[643px\]{
+    width: 643px;
+  }
+
   .tb\:min-w-\[18rem\]{
     min-width: 18rem;
   }
@@ -9847,6 +9943,10 @@ select{
     max-width: 530px;
   }
 
+  .tb\:max-w-\[700px\]{
+    max-width: 700px;
+  }
+
   .tb\:snap-always{
     scroll-snap-stop: always;
   }
@@ -9911,10 +10011,6 @@ select{
     gap: 0.75rem;
   }
 
-  .tb\:gap-\[132px\]{
-    gap: 132px;
-  }
-
   .tb\:gap-\[31\.5rem\]{
     gap: 31.5rem;
   }
@@ -9932,14 +10028,6 @@ select{
     border-radius: 1.5rem;
   }
 
-  .tb\:rounded-none{
-    border-radius: 0px;
-  }
-
-  .tb\:rounded-tl-3xl{
-    border-top-left-radius: 1.5rem;
-  }
-
   .tb\:border{
     border-width: 1px;
   }
@@ -10002,21 +10090,11 @@ select{
     padding-right: 2rem;
   }
 
-  .tb\:py-0{
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .tb\:py-14{
     padding-top: 3.5rem;
     padding-bottom: 3.5rem;
   }
 
-  .tb\:py-\[104px\]{
-    padding-top: 104px;
-    padding-bottom: 104px;
-  }
-
   .tb\:pb-0{
     padding-bottom: 0px;
   }
@@ -10029,10 +10107,6 @@ select{
     padding-bottom: 2rem;
   }
 
-  .tb\:pl-20{
-    padding-left: 5rem;
-  }
-
   .tb\:pr-0{
     padding-right: 0px;
   }
@@ -10775,6 +10849,10 @@ select{
 }
 
 @media (min-width: 1240px){
+  .db\:absolute{
+    position: absolute;
+  }
+
   .db\:-left-5{
     left: -1.25rem;
   }
@@ -10791,6 +10869,14 @@ select{
     margin-left: 0px;
   }
 
+  .db\:mt-0{
+    margin-top: 0px;
+  }
+
+  .db\:block{
+    display: block;
+  }
+
   .db\:inline{
     display: inline;
   }
@@ -10799,6 +10885,14 @@ select{
     display: flex;
   }
 
+  .db\:hidden{
+    display: none;
+  }
+
+  .db\:h-\[800px\]{
+    height: 800px;
+  }
+
   .db\:w-1\/2{
     width: 50%;
   }
@@ -10829,6 +10923,10 @@ select{
     width: 100%;
   }
 
+  .db\:min-w-\[550px\]{
+    min-width: 550px;
+  }
+
   .db\:min-w-\[625px\]{
     min-width: 625px;
   }
@@ -10857,6 +10955,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 +10983,10 @@ select{
     gap: 10rem;
   }
 
+  .db\:gap-\[132px\]{
+    gap: 132px;
+  }
+
   .db\:gap-x-10{
     -webkit-column-gap: 2.5rem;
             column-gap: 2.5rem;
@@ -10899,6 +11005,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;
   }
@@ -10907,6 +11021,11 @@ select{
     padding: 2rem;
   }
 
+  .db\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .db\:px-20{
     padding-left: 5rem;
     padding-right: 5rem;
@@ -10922,6 +11041,11 @@ select{
     padding-right: 1rem;
   }
 
+  .db\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .db\:py-20{
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -10948,6 +11072,14 @@ select{
     padding-bottom: 7rem;
   }
 
+  .db\:pb-\[74px\]{
+    padding-bottom: 74px;
+  }
+
+  .db\:pl-20{
+    padding-left: 5rem;
+  }
+
   .db\:pl-28{
     padding-left: 7rem;
   }
@@ -10972,6 +11104,10 @@ select{
     padding-top: 8rem;
   }
 
+  .db\:pt-\[104px\]{
+    padding-top: 104px;
+  }
+
   .db\:text-left{
     text-align: left;
   }