hds-web 1.8.0 → 1.8.2

package/src/HDS/components/Footers/v3Footer.js

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+import { Typography } from '../../foundation/Typography';
+
+const LinkedIn = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.31687 9.12914C7.31687 10.1979 6.47716 11.0376 5.40844 11.0376C4.33971 11.0376 3.5 10.1979 3.5 9.12914C3.5 8.06042 4.33971 7.2207 5.40844 7.2207C6.47716 7.2207 7.31687 8.06042 7.31687 9.12914ZM7.31687 12.5643H3.5V24.7783H7.31687V12.5643ZM13.4239 12.5643H9.607V24.7783H13.4239V18.366C13.4239 14.7781 18.0041 14.4728 18.0041 18.366V24.7783H21.821V17.0682C21.821 11.0376 15.027 11.2666 13.4239 14.2438V12.5643Z" />
+  </svg>
+)
+
+const Youtude = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.087 8.93655L21.087 8.93659L21.1002 8.93761C21.9378 9.00203 22.3817 9.16101 22.6263 9.30672C22.827 9.42628 23.0039 9.59975 23.1728 9.98218C23.3636 10.4144 23.5265 11.0801 23.6296 12.1242C23.7315 13.1571 23.7646 14.4356 23.7646 16.0392C23.7646 17.6426 23.7315 18.9284 23.6294 19.9704C23.5261 21.0243 23.3626 21.7015 23.17 22.1417C22.9987 22.5332 22.8229 22.7001 22.6368 22.8096C22.4079 22.9441 21.9795 23.0951 21.1534 23.1375L21.1534 23.1374L21.1445 23.1379C17.4729 23.3419 9.22945 23.3423 5.5387 23.1392C4.71481 23.0738 4.27627 22.9162 4.03377 22.7718C3.8331 22.6522 3.65613 22.4787 3.4873 22.0963C3.29651 21.6641 3.13358 20.9984 3.03051 19.9542C2.92855 18.9213 2.8955 17.6429 2.8955 16.0392C2.8955 14.4356 2.92855 13.1571 3.03051 12.1242C3.13358 11.0801 3.29651 10.4144 3.4873 9.98219C3.65613 9.59975 3.8331 9.42628 4.03377 9.30672C4.27834 9.16101 4.7223 9.00203 5.55985 8.93761L5.55985 8.93765L5.5731 8.93655C9.21419 8.63312 17.4459 8.63312 21.087 8.93655ZM0.808594 16.0392C0.808594 22.5087 1.33032 24.9086 5.39979 25.2216C9.15622 25.4303 17.5039 25.4303 21.2603 25.2216C25.3298 25.0129 25.8515 22.5087 25.8515 16.0392C25.8515 9.56983 25.3298 7.16988 21.2603 6.85685C17.5039 6.54381 9.15622 6.54381 5.39979 6.85685C1.33032 7.16988 0.808594 9.56983 0.808594 16.0392ZM11.71 19.4583C11.0162 19.8052 10.1999 19.3006 10.1999 18.525V13.554C10.1999 12.7783 11.0162 12.2738 11.71 12.6207L16.6809 15.1062C17.45 15.4907 17.45 16.5882 16.6809 16.9728L11.71 19.4583Z" />
+  </svg>
+)
+
+const Facebook = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.755 13.0059H8.50977V15.9995H10.755V24.9805H14.4971V15.9995H17.1914L17.4907 13.0059H14.4971V11.7336C14.4971 11.06 14.6468 10.7606 15.3203 10.7606H17.4907V7.01855H14.6468C11.9525 7.01855 10.755 8.21602 10.755 10.4613V13.0059Z" />
+  </svg>
+)
+
+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" />
+  </svg>
+)
+
+const Instagram = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3394 7.2359C16.2009 7.2359 16.5586 7.2359 17.7212 7.32532C20.6722 7.41475 22.0135 8.84554 22.103 11.7071C22.1924 12.8696 22.1924 13.1379 22.1924 15.9995C22.1924 18.8611 22.1924 19.2188 22.103 20.2919C22.0135 23.1535 20.5828 24.5843 17.7212 24.6737C16.5586 24.7631 16.2904 24.7631 13.3394 24.7631C10.4778 24.7631 10.1201 24.7631 9.04697 24.6737C6.09596 24.5843 4.75459 23.1535 4.66517 20.2919C4.57574 19.1294 4.57574 18.8611 4.57574 15.9995C4.57574 13.1379 4.57574 12.7802 4.66517 11.7071C4.75459 8.84554 6.18538 7.41475 9.04697 7.32532C10.1201 7.2359 10.4778 7.2359 13.3394 7.2359ZM13.3394 5.26855C10.3883 5.26855 10.0306 5.26855 8.95755 5.35798C5.02286 5.53683 2.87667 7.68302 2.69782 11.6177C2.6084 12.6908 2.6084 13.0485 2.6084 15.9995C2.6084 18.9505 2.6084 19.3082 2.69782 20.3813C2.87667 24.316 5.02286 26.4622 8.95755 26.641C10.0306 26.7305 10.3883 26.7305 13.3394 26.7305C16.2904 26.7305 16.6481 26.7305 17.7212 26.641C21.6558 26.4622 23.802 24.316 23.9809 20.3813C24.0703 19.3082 24.0703 18.9505 24.0703 15.9995C24.0703 13.0485 24.0703 12.6908 23.9809 11.6177C23.802 7.68302 21.6558 5.53683 17.7212 5.35798C16.6481 5.26855 16.2904 5.26855 13.3394 5.26855ZM13.3394 10.4552C10.2989 10.4552 7.79503 12.9591 7.79503 15.9995C7.79503 19.0399 10.2989 21.5438 13.3394 21.5438C16.3798 21.5438 18.8837 19.0399 18.8837 15.9995C18.8837 12.9591 16.3798 10.4552 13.3394 10.4552ZM13.3394 19.5765C11.372 19.5765 9.76237 17.9669 9.76237 15.9995C9.76237 14.0322 11.372 12.4225 13.3394 12.4225C15.3067 12.4225 16.9163 14.0322 16.9163 15.9995C16.9163 17.9669 15.3067 19.5765 13.3394 19.5765ZM19.0625 9.02439C18.3471 9.02439 17.8106 9.56094 17.8106 10.2763C17.8106 10.9917 18.3471 11.5283 19.0625 11.5283C19.7779 11.5283 20.3145 10.9917 20.3145 10.2763C20.3145 9.56094 19.7779 9.02439 19.0625 9.02439Z" />
+  </svg>
+)
+
+const socialShare = [
+  {
+    icon: <LinkedIn />,
+    linkUrl: 'https://www.linkedin.com/company/hasura/',
+  },
+  {
+    icon: <Youtude />,
+    linkUrl: 'https://www.youtube.com/channel/UCZo1ciR8pZvdD3Wxp9aSNhQ',
+  },
+  {
+    icon: <Facebook />,
+    linkUrl: 'https://www.facebook.com/HasuraHQ',
+  },
+  {
+    icon: <Twitter />,
+    linkUrl: 'https://twitter.com/hasurahq',
+  },
+  {
+    icon: <Instagram />,
+    linkUrl: 'https://www.instagram.com/hasurahq/?hl=en',
+  },
+]
+
+export default function V3Header(props) {
+  const [isError, setIsError] = useState(false);
+  const [isItems, setIsItems] = useState(null);
+  useEffect(() => {
+    fetch("https://status.hasura.io/api/v2/status.json")
+      .then(res => res.json())
+      .then(
+        result => {
+          setIsItems(result);
+          setIsError(false);
+        },
+        error => {
+          setIsError(true);
+        }
+      );
+  }, []);
+  return (
+    <div>
+      <div className='db-s:flex justify-between gap-10 db-s:gap-20 db:gap-40'>
+        <div className='max-w-[125px] pb-10 db-s:pb-0'>
+          <a href={props.brandLink} className=''>
+            <img src={props.brandUrl} alt={props.brandAlt} />
+          </a>
+        </div>
+        <div className='flex justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
+          {
+            props.footerLinks.map((footerLink, index) =>(
+              <div key={index} className='min-w-[140px] db-s:min-w-fit'>
+                <Typography textStyle='body3c-semi-bold' className='text-neutral-600'>{footerLink.title}</Typography>
+                {
+                  footerLink.links.map((link, subIndex) => (
+                    <a href={link.linkUrl}>
+                      <Typography textStyle='body3' className='text-neutral-600 mt-2 tb:mt-4 hover:text-neutral-1000'>{link.linkText}</Typography>
+                    </a>
+                  ))
+                }
+              </div>
+            ))
+          }
+        </div>
+      </div>
+      <div className='flex flex-col tb-m:flex-row items-center justify-between tb:pt-24'>
+        <div className='flex items-center justify-center pt-10 tb-m:pt-0 pb-4 tb-m:pb-0 tb-m:justify-start'>
+          {
+            socialShare.map((icon, index)=>(
+              <a href={icon.linkUrl} className='mx-2 tb-l:mx-4 first:ml-0 last:mr-0 [&>svg>path]:fill-neutral-400 [&>svg>path]:hover:fill-neutral-600'>
+                {icon.icon}
+              </a>
+            ))
+          }
+        </div>
+        {isItems && !isError && (
+          <div className=' bg-neutral-0 rounded-full shadow-md px-4 py-2 inline-flex justify-center items-center'>
+            <div className='w-4 h-4 bg-green-400 rounded-full mr-2'></div>
+            <Typography textStyle='body3' className='text-neutral-1000'>{isItems?.status.description}</Typography>
+          </div>
+        )}
+        <div>
+          <Typography textStyle='body3c' className='text-neutral-600 pt-4 tb-m:pt-0'>© {new Date().getFullYear()} Hasura Inc. All rights reserved</Typography>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/HDS/components/index.js

@@ -14,4 +14,5 @@ export * from './Tooltip';
 export * from './Hero';
 export * from './Tables';
 export * from './Carousels';
-export * from './Pre-footers';
+export * from './Pre-footers';
+export * from './Footers';

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

@@ -1 +1,2 @@
-export {default as TextCard} from './textCard';
+export {default as TextCard} from './textCard';
+export {default as TextIconCard} from './textIconCard'

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

@@ -7,7 +7,7 @@ import ReactMarkdown from "react-markdown";
 
 export default function TextCard(props) {
   const titleColor = HDSColor(props.title_color);
-  const subtitleColorClass = HDSColor(props.subtitle_color)
+  const subtitleColorClass = HDSColor(props.sub_text_color)
   const currentImgActive = (props.feature_cards_links && props.feature_cards_links[0]?.title) ? props.feature_cards_links[0].title : null;
   const [imgActive, setImgActive] = useState(currentImgActive);
   return (
@@ -21,7 +21,7 @@ export default function TextCard(props) {
             !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${HDSColor(titleColor)} pb-6`}>{props.title}</Typography>)
           }
           {
-            !props.feature_cards_links && props.subtitle && (<Typography textStyle="sub1" className={`${(subtitleColorClass)} pb-2 -mt-4`}>{props.subtitle}</Typography>)
+            !props.feature_cards_links && props.sub_title && (<Typography textStyle="sub1" className={`${(subtitleColorClass)} pb-2 -mt-4`}>{props.sub_title}</Typography>)
           }
           {
             props.descriptions && props.descriptions.map((desc, i) => (

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

@@ -0,0 +1,251 @@
+import React, { Fragment, useState } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { HDSButton } from '../../components/Buttons';
+import { Icon } from '../../components/common-components/Icon';
+import ReactMarkdown from "react-markdown";
+
+export default function TextCardB(props) {
+    const titleColor = HDSColor(props.title_color);
+    const subtitleColorClass = HDSColor(props.sub_text_color)
+    const currentImgActive = (props.feature_cards_links && props.feature_cards_links[0]?.title) ? props.feature_cards_links[0].title : null;
+    const [imgActive, setImgActive] = useState(currentImgActive);
+    return (
+        <>
+            {
+                props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-8 tb-l:w-1/2`}>{props.title}</Typography>)
+            }
+            <div className={'grid grid-cols-1 tb-l:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
+                <div>
+                    {
+                        !props.feature_cards_links && (<Typography textStyle="body1c-bold" className={`${HDSColor(titleColor)} pb-6`}>{props.title}</Typography>)
+                    }
+                    {
+                        !props.feature_cards_links && props.sub_title && (<Typography textStyle="sub1" className={`${(subtitleColorClass)} pb-2 -mt-4`}>{props.sub_title}</Typography>)
+                    }
+                    {
+                        props.descriptions && props.descriptions.map((desc, i) => (
+                            <Typography
+                                key={i}
+                                textStyle="body1"
+                                className="pb-6 pr-8  [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
+                                <ReactMarkdown>
+                                    {desc.description}
+                                </ReactMarkdown>
+                            </Typography>
+                        ))
+                    }
+                    {
+                        props.descriptions_list && (
+                            <div className="pb-6">
+                                {
+                                    props.descriptions_list && props.descriptions_list.map((descList, j) => {
+                                        const iconBgColor = HDSColor(descList.icon_bg_color);
+                                        const iconColor = HDSColor(descList.icon_color);
+                                        return (
+                                            <div className='flex items-start pb-4 last:pb-0' key={j}>
+                                                <div className={`${iconBgColor} w-6 h-6 min-w-[24px] min-h-[24px] rounded-full mr-2 flex items-center justify-center`}>
+                                                    <Icon
+                                                        height={`h-3 w-3 stroke-[1.5px]`}
+                                                        variant={descList.icon_name}
+                                                        strokeClass={iconColor}
+                                                    />
+                                                </div>
+                                                <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
+                                            </div>
+                                        )
+                                    })
+
+                                }
+                            </div>
+                        )
+                    }
+                    {
+                        props.feature_cards_links && (
+                            <div className='tb:border border-neutral-150 rounded-2xl tb-l:rounded-e-none'>
+                                {
+                                    props.feature_cards_links.map((list, i) => {
+                                        const currentStrokeColor = HDSColor(list.icon_color)
+                                        const imgBgColor = HDSColor(list.tab_img_bg_class)
+                                        return (
+                                            <div key={i} className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={() => setImgActive(list.title)}>
+                                                <div className={'m-2 p-0 tb:p-6 rounded-lg transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
+                                                    <div className='flex items-center pb-4'>
+                                                        <Icon
+                                                            height={`w-6 h-6 mr-2 stroke-[1.5px]`}
+                                                            variant={list.icon_name}
+                                                            strokeClass={currentStrokeColor}
+                                                        />
+                                                        <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
+                                                    </div>
+                                                    {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-1000'>{list.description}</Typography>}
+                                                    {
+                                                        list.descriptions_list && list.descriptions_list.map((descList, j) => {
+                                                            const iconBgColor = HDSColor(descList.icon_bg_color);
+                                                            const iconColor = HDSColor(descList.icon_color);
+                                                            return (
+                                                                <div className='flex items-start pb-4 last:pb-0' key={j}>
+                                                                    <div className={`${iconBgColor} w-5 h-5 min-w-[20px] min-h-[20px] rounded-full mr-2 flex items-center justify-center`}>
+                                                                        <Icon
+                                                                            height={`h-3 w-3 stroke-[1.5px]`}
+                                                                            variant={descList.icon_name}
+                                                                            strokeClass={iconColor}
+                                                                        />
+                                                                    </div>
+                                                                    <Typography textStyle='body3c' className='text-neutral-1000'>{descList.description}</Typography>
+                                                                </div>
+                                                            )
+                                                        })
+                                                    }
+                                                    {
+                                                        list.cta_text && list.cta_link && (
+                                                            <a href={list.cta_link} className="flex">
+                                                                <HDSButton
+                                                                    label={list.cta_text}
+                                                                    type='secondaryLink'
+                                                                    leftIconVariant='none'
+                                                                    rightIconVariant='none'
+                                                                    state='default'
+                                                                    size='md'
+                                                                    rightAnimatedArrow={true}
+                                                                    rightAnimatedArrowColor='#3970FD'
+                                                                    btnTextColorClass="text-blue-500"
+                                                                    animatedHoverStroke='group-hover:stroke-blue-600'
+                                                                />
+                                                            </a>
+                                                        )
+                                                    }
+                                                    {
+                                                        list.tab_img_url && (
+                                                            <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
+                                                                <img src={list.tab_img_url} alt={list.title} loading="lazy" />
+                                                            </div>
+                                                        )
+                                                    }
+
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        )
+                    }
+
+                    {props.button &&
+                        <div className="flex gap-6 items-center">
+                            {props.button.map((btn, index) => (
+                                <a href={btn.cta_link} key={index} className="flex ">
+                                    <HDSButton
+                                        label={btn.cta_text}
+                                        type={btn.cta_type || 'secondary'}
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='md'
+                                        rightAnimatedArrow={true}
+                                        rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
+                                        btnBgColorClass={btn.btnBg}
+                                        btnTextHoverClass={btn.btnTextColorClass}
+                                        animatedHoverStroke={btn.animatedHoverStroke}
+                                        btnTextColorClass={btn.btnTextColorClass}
+                                    />
+                                </a>))
+                            }
+                        </div>
+                    }
+                </div>
+                {
+                    props.feature_cards_links ? (
+                        <>
+                            {
+                                props.feature_cards_links.map((img, i) => {
+                                    const imgBgColor = HDSColor(img.tab_img_bg_class)
+                                    return (
+                                        <Fragment key={i}>
+                                            {
+                                                imgActive === img.title && (
+                                                    <div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl tb-l:rounded-s-none`}>
+                                                        {
+                                                            img.tab_video_url ? (
+                                                                <video
+                                                                    loading="lazy"
+                                                                    controls={false}
+                                                                    autoPlay
+                                                                    loop
+                                                                    muted
+                                                                    poster={img.tab_video_poster}
+                                                                    className=""
+                                                                >
+                                                                    <source
+                                                                        src={img.tab_video_url}
+                                                                        type="video/mp4"
+                                                                    />
+                                                                </video>
+                                                            ) : (
+                                                                <img src={img.tab_img_url} alt={img.title} loading="lazy" />
+                                                            )
+                                                        }
+                                                    </div>
+                                                )
+                                            }
+                                        </Fragment>
+                                    )
+                                })
+                            }
+                        </>
+                    ) : (
+                        <>
+                            {
+                                props.iframe_url || props.video_url ? (
+                                    <div>
+                                        {
+                                            props.iframe_url ? (
+                                                <div className="relative pb-[56.2%]">
+                                                    <iframe
+                                                        loading="lazy"
+                                                        title={props.title}
+                                                        src={props.iframe_url}
+                                                        frameBorder="0"
+                                                        allowFullScreen
+                                                        className="absolute w-full h-full rounded-2xl db:rounded-3xl"
+                                                    ></iframe>
+                                                </div>
+                                            ) : (
+                                                <video
+                                                    loading="lazy"
+                                                    controls={false}
+                                                    autoPlay
+                                                    loop
+                                                    muted
+                                                    poster={props.video_poster}
+                                                    className="rounded-2xl db:rounded-3xl"
+                                                >
+                                                    <source
+                                                        src={props.video_url}
+                                                        type="video/mp4"
+                                                    />
+                                                </video>
+                                            )
+                                        }
+                                    </div>
+                                ) : (
+                                    <>
+                                        {props.img_url && (
+                                            <div className={`${HDSColor(props.img_bg_class)} px-5 py-10 flex items-center justify-center db:p-8 rounded-2xl db:rounded-3xl`}>
+                                                <img className='rounded-2xl db:rounded-3xl inline-block' src={props.img_url} alt={props.title} loading="lazy" />
+                                            </div>
+                                        )}
+                                    </>
+                                )
+                            }
+
+                        </>
+                    )
+                }
+            </div>
+
+
+        </>
+    )
+}

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { HDSButton } from '../../components/Buttons';
+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="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 &&
+            <div className="flex gap-6 items-center">
+              {props.button.map((btn, index) => (
+                <a href={btn.cta_link} key={index} className="flex ">
+                  <HDSButton
+                    label={btn.cta_text}
+                    type={btn.cta_type || 'secondary'}
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='md'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
+                  />
+                </a>))
+              }
+            </div>
+          }
+      </div>
+      <div className="flex-1 pt-14 tb-m:pt-0">
+        {
+          props.iconCards.map((card, index) => (
+            <div className="tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
+              <div className={`${HDSColor(card.iconBg)} w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
+                <Icon height={'h-6 w-6'} variant={card.iconVariant} strokeClass={`${HDSColor(card.iconStrokeClass)}`} />
+              </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/HDS/modules/navCard/navCard.js

@@ -62,7 +62,7 @@ export default function NavCard(props) {
             <div>
                 {props.navTabs &&
 
-                    <div className='max-w-[44.44rem] p-16 bg-neutral-0 shadow rounded-2xl'>
+                    <div className='max-w-[44.44rem] bg-neutral-0 shadow rounded-2xl'>
 
                         <div className='flex justify-center pb-8'>
                             <Tab

package/src/index.css

@@ -4,6 +4,10 @@
 @tailwind utilities;
 /* Typography classes */
 
+.carouselShadow{
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
 .border-transparent{
   border: transparent !important;
 }