hds-web 1.10.8 → 1.11.0

package/src/HDS/modules/TextCard/textIconCard.js

@@ -7,43 +7,50 @@ import { Icon } from '../../components/common-components/Icon';
 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="pb-10 tb-m:pb-0 db-s:max-w-[524px] tb-m:w-1/2 w-full">
-        {
-          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 className="pb-10 tb-m:pb-0 db-s:max-w-[524px] tb-m:w-1/2 w-full flex flex-col justify-between">
+        <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>
+            )
+          }
+        </div>
+        <div>
+          {
+            props.imgUrl && (
+              <div className="pb-4 pt-2">
+                <img className="max-w-[210px]" src={props.imgUrl} alt={((props.title) ? props.title : "Illu")} />
+            </div>
+            )
+          }
+          {props.button &&
+            <a href={props.button.cta_link} className="inline-flex " download target="_blank">
+              <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'}
+                animatedHoverStroke="group-hover:stroke-blue-600"
+                btnTextHoverClass="hover:text-blue-600"
+                btnTextColorClass="text-blue-500"
+              />
+            </a>
+          }
+        </div>
       </div>
       {
         props.iconCards && (

package/src/styles/tailwind.css

@@ -839,11 +839,6 @@ select{
   position: relative;
 }
 
-.sticky{
-  position: -webkit-sticky;
-  position: sticky;
-}
-
 .inset-0{
   inset: 0px;
 }
@@ -1778,8 +1773,8 @@ select{
   min-width: 112px;
 }
 
-.min-w-\[140px\]{
-  min-width: 140px;
+.min-w-\[130px\]{
+  min-width: 130px;
 }
 
 .min-w-\[169px\]{
@@ -9310,6 +9305,10 @@ select{
   transition-duration: 150ms;
 }
 
+.hover\:duration-200:hover{
+  transition-duration: 200ms;
+}
+
 .hover\:duration-300:hover{
   transition-duration: 300ms;
 }
@@ -9712,23 +9711,6 @@ select{
   }
 }
 
-@media (max-width: 699px){
-  .max-\[699px\]\:w-screen{
-    width: 100vw;
-  }
-}
-
-@media (max-width: 399px){
-  .max-\[399px\]\:rounded-full{
-    border-radius: 9999px;
-  }
-
-  .max-\[399px\]\:bg-blue-300{
-    --tw-bg-opacity: 1;
-    background-color: rgb(198 214 255 / var(--tw-bg-opacity));
-  }
-}
-
 @media (max-width: 369px){
   .max-\[369px\]\:mt-8{
     margin-top: 2rem;
@@ -9830,10 +9812,6 @@ select{
   .mb-m\:pt-0{
     padding-top: 0px;
   }
-
-  .min-\[400px\]\:-mt-20{
-    margin-top: -5rem;
-  }
 }
 
 @media (min-width: 600px){
@@ -10554,39 +10532,6 @@ select{
   }
 }
 
-@media (min-width: 699px){
-  .min-\[699px\]\:absolute{
-    position: absolute;
-  }
-
-  .min-\[699px\]\:relative{
-    position: relative;
-  }
-
-  .min-\[699px\]\:mt-\[70px\]{
-    margin-top: 70px;
-  }
-
-  .min-\[699px\]\:block{
-    display: block;
-  }
-
-  .min-\[699px\]\:flex{
-    display: flex;
-  }
-
-  .min-\[699px\]\:hidden{
-    display: none;
-  }
-
-  .min-\[699px\]\: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));
-  }
-}
-
 @media (min-width: 800px){
   .tb-m\:flex{
     display: flex;
@@ -11166,10 +11111,6 @@ select{
     padding-right: 0px;
   }
 
-  .db\:pt-12{
-    padding-top: 3rem;
-  }
-
   .db\:pt-20{
     padding-top: 5rem;
   }
@@ -11443,23 +11384,6 @@ select{
   }
 }
 
-@media (min-width: 1300px){
-  .min-\[1300px\]\:flex{
-    display: flex;
-  }
-
-  .min-\[1300px\]\:max-w-7xl{
-    max-width: 80rem;
-  }
-}
-
-@media (min-width: 1880px){
-  .min-\[1880px\]\:gap-x-72{
-    -webkit-column-gap: 18rem;
-            column-gap: 18rem;
-  }
-}
-
 .\[\&\>\*\]\:mb-8>*{
   margin-bottom: 2rem;
 }