hds-web 1.2.0 → 1.2.2

package/package.json

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

package/src/HDS/assets/icons/hasura-1.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04272 3.01211C6.48206 2.0875 8.19783 1.54417 10.0375 1.54417H10.2472C12.0869 1.54417 13.8027 2.07797 15.242 3.01211C15.69 3.29807 16.281 3.20275 16.6051 2.79287L17.7871 0.953183C17.8824 0.819734 18.0254 0.724414 18.1874 0.714882C18.3495 0.70535 18.5115 0.772074 18.6068 0.905523C19.56 2.2972 19.8269 5.45231 19.3027 7.07276C19.112 7.64469 19.0644 8.2452 19.1692 8.82666C19.2836 9.40812 19.3885 10.104 19.3885 10.5901C19.3885 15.5944 15.2992 19.6455 10.2472 19.6455H10.0375C4.98552 19.6455 0.896274 15.5944 0.896274 10.5901C0.896274 10.104 1.01066 9.40812 1.11551 8.82666C1.22036 8.2452 1.16317 7.64469 0.982062 7.07276C0.457799 5.45231 0.734229 2.2972 1.6779 0.905523C1.76369 0.762542 1.93527 0.70535 2.09731 0.714882C2.25936 0.733946 2.41187 0.819734 2.49766 0.953183L3.67963 2.79287C4.01326 3.20275 4.59471 3.29807 5.04272 3.01211ZM11.108 14.2727V7H9.28977L7.5 8.09375V9.76989L9.09091 8.81818H9.13352V14.2727H11.108Z" fill="#80A3FF"/>
+</svg>

package/src/HDS/assets/icons/hasura-2.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04272 3.01211C6.48206 2.0875 8.19783 1.54417 10.0375 1.54417H10.2472C12.0869 1.54417 13.8027 2.07797 15.242 3.01211C15.69 3.29807 16.281 3.20275 16.6051 2.79287L17.7871 0.953183C17.8824 0.819734 18.0254 0.724414 18.1874 0.714882C18.3495 0.70535 18.5115 0.772074 18.6068 0.905523C19.56 2.2972 19.8269 5.45231 19.3027 7.07276C19.112 7.64469 19.0644 8.2452 19.1692 8.82666C19.2836 9.40812 19.3885 10.104 19.3885 10.5901C19.3885 15.5944 15.2992 19.6455 10.2472 19.6455H10.0375C4.98552 19.6455 0.896274 15.5944 0.896274 10.5901C0.896274 10.104 1.01066 9.40812 1.11551 8.82666C1.22036 8.2452 1.16317 7.64469 0.982062 7.07276C0.457799 5.45231 0.734229 2.2972 1.6779 0.905523C1.76369 0.762542 1.93527 0.70535 2.09731 0.714882C2.25936 0.733946 2.41187 0.819734 2.49766 0.953183L3.67963 2.79287C4.01326 3.20275 4.59471 3.29807 5.04272 3.01211ZM7.14205 12.9517V14.3722H12.7244V12.7955H9.88352V12.7528L10.5653 12.1847C11.1193 11.723 11.5466 11.3253 11.8473 10.9915C12.148 10.6577 12.3563 10.3535 12.4723 10.0788C12.5883 9.80185 12.6463 9.52367 12.6463 9.24432C12.6463 8.79214 12.5291 8.39796 12.2947 8.06179C12.0627 7.72562 11.7325 7.4652 11.304 7.28054C10.8778 7.09351 10.3736 7 9.79119 7C9.22775 7 8.73651 7.09943 8.31747 7.2983C7.89844 7.49716 7.5741 7.78125 7.34446 8.15057C7.11482 8.51989 7 8.96023 7 9.47159H8.875C8.875 9.26799 8.91288 9.09517 8.98864 8.95312C9.06439 8.81108 9.17093 8.70336 9.30824 8.62997C9.44792 8.55658 9.6089 8.51989 9.79119 8.51989C9.97348 8.51989 10.1345 8.55658 10.2741 8.62997C10.4138 8.70099 10.5227 8.80279 10.6009 8.93537C10.6813 9.06794 10.7216 9.22775 10.7216 9.41477C10.7216 9.58523 10.6861 9.74029 10.6151 9.87997C10.5464 10.0196 10.447 10.1558 10.3168 10.2884C10.1889 10.4186 10.035 10.5582 9.85511 10.7074L7.14205 12.9517Z" fill="#80A3FF"/>
+</svg>

package/src/HDS/assets/icons/hasura-3.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04272 3.01211C6.48206 2.0875 8.19783 1.54417 10.0375 1.54417H10.2472C12.0869 1.54417 13.8027 2.07797 15.242 3.01211C15.69 3.29807 16.281 3.20275 16.6051 2.79287L17.7871 0.953183C17.8824 0.819734 18.0254 0.724414 18.1874 0.714882C18.3495 0.70535 18.5115 0.772074 18.6068 0.905523C19.56 2.2972 19.8269 5.45231 19.3027 7.07276C19.112 7.64469 19.0644 8.2452 19.1692 8.82666C19.2836 9.40812 19.3885 10.104 19.3885 10.5901C19.3885 15.5944 15.2992 19.6455 10.2472 19.6455H10.0375C4.98552 19.6455 0.896274 15.5944 0.896274 10.5901C0.896274 10.104 1.01066 9.40812 1.11551 8.82666C1.22036 8.2452 1.16317 7.64469 0.982062 7.07276C0.457799 5.45231 0.734229 2.2972 1.6779 0.905523C1.76369 0.762542 1.93527 0.70535 2.09731 0.714882C2.25936 0.733946 2.41187 0.819734 2.49766 0.953183L3.67963 2.79287C4.01326 3.20275 4.59471 3.29807 5.04272 3.01211ZM8.42756 14.1768C8.87263 14.3733 9.38163 14.4716 9.95455 14.4716C10.5488 14.4716 11.0732 14.3781 11.5277 14.1911C11.9846 14.004 12.3409 13.746 12.5966 13.4169C12.8546 13.0878 12.9825 12.7102 12.9801 12.2841C12.9848 11.839 12.8393 11.4697 12.5433 11.1761C12.2474 10.8802 11.8059 10.7003 11.2188 10.6364V10.5795C11.652 10.5322 12.0095 10.3783 12.2912 10.1179C12.5753 9.85748 12.715 9.52367 12.7102 9.11648C12.7126 8.70691 12.5966 8.34351 12.3622 8.02628C12.1302 7.70668 11.8071 7.45573 11.3928 7.27344C10.9808 7.09115 10.5062 7 9.96875 7C9.41951 7 8.933 7.09706 8.50923 7.29119C8.08546 7.48532 7.75166 7.75284 7.50781 8.09375C7.26634 8.43466 7.14441 8.82765 7.14205 9.27273H9.03125C9.03362 9.12595 9.07505 8.99574 9.15554 8.8821C9.23603 8.76847 9.34612 8.67969 9.4858 8.61577C9.62784 8.55185 9.78883 8.51989 9.96875 8.51989C10.1345 8.51989 10.2801 8.55066 10.4055 8.61222C10.5334 8.67377 10.6328 8.759 10.7038 8.8679C10.7749 8.9768 10.8092 9.10227 10.8068 9.24432C10.8092 9.3911 10.7678 9.52131 10.6825 9.63494C10.5997 9.74858 10.4825 9.83736 10.331 9.90128C10.1818 9.9652 10.009 9.99716 9.8125 9.99716H9.07386V11.3608H9.8125C10.0256 11.3608 10.2138 11.3928 10.3771 11.4567C10.5405 11.5206 10.6671 11.6094 10.7571 11.723C10.8494 11.8366 10.8944 11.9669 10.892 12.1136C10.8944 12.2628 10.8565 12.3954 10.7784 12.5114C10.7003 12.6274 10.5914 12.7185 10.4517 12.7848C10.312 12.8487 10.151 12.8807 9.96875 12.8807C9.77936 12.8807 9.61127 12.8499 9.46449 12.7884C9.31771 12.7268 9.2017 12.6416 9.11648 12.5327C9.03362 12.4214 8.991 12.2959 8.98864 12.1562H7C7.00237 12.6084 7.13021 13.0085 7.38352 13.3565C7.63684 13.7045 7.98485 13.978 8.42756 14.1768Z" fill="#80A3FF"/>
+</svg>

package/src/HDS/components/Buttons/button.js

@@ -36,7 +36,7 @@ const Buttonclasses = {
   },
   'secondary': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-blue-500',
+      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
 
       'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:delay-100 hover:duration-300',
       
@@ -54,7 +54,7 @@ const Buttonclasses = {
   },
   'primaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full justify-center text-blue-500',
+      'base': 'db:w-fit tb:w-fit w-full justify-center ',
       'hover': 'hover:text-neutral-0',
       'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
     },
@@ -62,7 +62,7 @@ const Buttonclasses = {
   },
   'secondaryLink': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-800',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center ',
       'hover': 'hover:text-neutral-900 ',
       'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
     },

package/src/HDS/components/Cards/Menu/flyout.js

@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../../common-components/Icon'
-import { Typography } from '../../../foundation/Typography'
+import React from "react";;
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
 export default function flyout(props) {
   const {
     label,

package/src/HDS/components/Cards/Menu/flyoutA.js

@@ -1,7 +1,8 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { Icon } from '../../common-components/Icon'
-import { Typography } from '../../../foundation/Typography'
+import React from "react";
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { Icon } from '../../common-components/Icon';
+import { Typography } from '../../../foundation/Typography';
 export default function FlyoutA(props) {
   const {
     label,

package/src/HDS/components/Cards/Menu/flyoutFull.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { Fragment } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'

package/src/HDS/components/Cards/Misc/iconCard.js

@@ -9,11 +9,28 @@ const cardVariant = {
         'cardStyle': 'p-10 ',
         'iconWidthStyle': 'h-20 w-20',
         'iconStyle': 'h-10 w-10',
+        'titleTextStyle': 'h4',
+        'titleClasses': 'mb-1 text-blue-800',
+        'descTextStyle': 'body1c',
+        'descClasses': 'text-neutral-1000'
     },
     "withoutButton": {
         'cardStyle': 'p-6',
         'iconWidthStyle': 'h-12 w-12',
         'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'h5',
+        'titleClasses': 'mb-1 text-blue-600',
+        'descTextStyle': 'body1',
+        'descClasses': 'text-neutral-1000'
+    },
+    "sm": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'body3c-bold',
+        'titleClasses': 'mb-1 text-neutral-800',
+        'descTextStyle': 'body3',
+        'descClasses': 'text-neutral-800'
     }
 }
 
@@ -21,68 +38,60 @@ export default function IconCard(props) {
     const iconBG = HDSColor(props.iconBg);
     return (
         <div
-            className={`bg-neutral-0 rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
+            className={`bg-neutral-0 grid rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
         >
-            <div
-                className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
-            >
-                <Icon
-                    height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
-                    variant={props.iconVariant}
-                    strokeColor={props.iconStroke}
-                    strokeClass={HDSColor(props.iconStrokeClass)} />
-            </div>
-            <div
-                className="flex-1">
-                {props.cardType === 'withoutButton' ? (
-                    <>
-                        <Typography
-                            textStyle="h5"
-                            as="h5"
-                            className="mb-1 text-blue-600">
-                            {props.title}
-                        </Typography>
-                        <Typography
-                            textStyle="body1"
-                            className="text-neutral-1000">
-                            {props.description}
-                        </Typography>
-                    </>
-                )
-                    :
-                    (
-                        <>
-                            <Typography
-                                textStyle="h4"
-                                as="h4"
-                                className="mb-1 text-blue-800">
-                                {props.title}
-                            </Typography>
-                            <Typography
-                                textStyle="body1c"
-                                className="text-neutral-1000">
-                                {props.description}
-                            </Typography>
-                        </>
-                    )
-                }
-                {props.cardType === 'withButton' && (
-                    <div className="flex mt-7">
-                        <HDSButton
-                            label='Start free'
-                            type='secondary'
-                            leftIconVariant='none'
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            rightAnimatedArrow={true}
-                            rightAnimatedArrowColor='#3970FD'
-                            className=' mt-7'
-                        />
-                    </div>
-                )}
+            <div className=" self-start">
+                <div
+                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+                >
+                    <Icon
+                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                        variant={props.iconVariant}
+                        strokeColor={props.iconStroke}
+                        strokeClass={HDSColor(props.iconStrokeClass)} />
+                </div>
+                <div
+                    className="flex-1">
+
+                    {props.cardType &&
+                        (
+                            <>
+                                <Typography
+                                    textStyle={cardVariant[props.cardType]['titleTextStyle']}
+                                    as={cardVariant[props.cardType]['titleTextStyle']}
+                                    className={cardVariant[props.cardType]['titleClasses']}
+                                >
+                                    {props.title}
+                                </Typography>
+                                <Typography
+                                    textStyle={cardVariant[props.cardType]['descTextStyle']}
+                                    className={cardVariant[props.cardType]['descClasses']}
 
+                                >
+                                    {props.description}
+                                </Typography>
+                            </>
+                        )
+                    }
+                </div>
             </div>
+            {props.cardType === 'withButton' && (
+                <div className="flex self-end mt-7">
+                    <HDSButton
+                        label='Start free'
+                        type='secondary'
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        state='default'
+                        size='sm'
+                        rightAnimatedArrow={true}
+                        rightAnimatedArrowColor='#3970FD'
+                        className=' mt-7'
+                    />
+                </div>
+            )}
+
+
 
         </div>
     )

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -8,7 +8,7 @@ import ReactMarkdown from "react-markdown";
 
 export default function TalkCard(props) {
     let CardClass = ''
-    if (props.speakerSet === undefined ){
+    if (props.speakerSet === undefined) {
         CardClass = 'flex';
     }
     else CardClass = 'flex tb-l:flex-row flex-col';
@@ -16,7 +16,7 @@ export default function TalkCard(props) {
 
         <div className="grid w-full">
             <div className={`${CardClass} w-full max-w-[882px]`}>
-                <div className={"px-8 py-6" + ((props.speakerSet ) ? " border-b tb-l:w-[62%] border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" : "")}>
+                <div className={"px-8 py-6" + ((props.speakerSet) ? " border-b tb-l:w-[62%] border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" : "")}>
                     <Badges
                         size={props.badges.size}
                         color={props.badges.color}
@@ -26,45 +26,51 @@ export default function TalkCard(props) {
                     />
 
                     <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
-                    {props.para && <Typography className='text-neutral-700 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1'>
-                      <ReactMarkdown>{props.para}</ReactMarkdown>
-                    </Typography>}
+
+                    {props.para &&
+                        <Typography
+                            className='line-clamp-3 text-neutral-700 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'
+                            textStyle='body1'>
+                            <ReactMarkdown>
+                                {props.para}
+                            </ReactMarkdown>
+                        </Typography>}
 
                 </div>
 
-                {props.speakerSet &&(
-                <div className="flex flex-col tb-l:w-[38%] pt-0 tb:pt-[2.875rem] justify-between">
-                    {
-                      props.speakerSet && (
-                        <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
-                            {props.speakerSet.map((value, i) => (
-                                <div key={i} className="">
+                {props.speakerSet && (
+                    <div className="flex flex-col tb-l:w-[38%] pt-0 tb:pt-[2.875rem] justify-between">
+                        {
+                            props.speakerSet && (
+                                <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
+                                    {props.speakerSet.map((value, i) => (
+                                        <div key={i} className="">
 
-                                    <ProfileAvatar
-                                        name={value.name}
-                                        size='md'
-                                        designation={value.designation}
-                                        imageUrl={value.imageUrl}
-                                    />
-                                </div>
+                                            <ProfileAvatar
+                                                name={value.name}
+                                                size='md'
+                                                designation={value.designation}
+                                                imageUrl={value.imageUrl}
+                                            />
+                                        </div>
 
-                            ))}
+                                    ))}
+                                </div>
+                            )
+                        }
+                        <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
+                            <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
+                            <HDSButton
+                                leftIconVariant='calendarplus02'
+                                leftIconColor="#1E56E3"
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                type="iconOnly"
+                                label=''
+                            />
                         </div>
-                      )
-                    }
-                    <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
-                        <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
-                        <HDSButton
-                            leftIconVariant='calendarplus02'
-                            leftIconColor="#1E56E3"
-                            rightIconVariant='none'
-                            state='default'
-                            size='sm'
-                            type="iconOnly"
-                            label=''
-                        />
-                    </div>
-                </div>)}
+                    </div>)}
             </div>
         </div>
 

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -4,65 +4,84 @@ import {HDSColor} from '../../../foundation/ColorPalette';
 import { Badges } from '../../BadgesCaption';
 import { ProfileAvatar } from '../../Avatars'
 import { Typography } from "../../../foundation/Typography";
+import ReactMarkdown from "react-markdown";
 
 
 export default function TalkDetailCard(props) {
   const badgeLeftIconColor = HDSColor(props.badgeLeftIconColor);
   return (
-    <div>
-      <Badges
-        color={props.badgeColor}
-        leftIconColor={badgeLeftIconColor}
-        leftIconVariant='home03'
-        size='default'
-      >
-        {props.talk_type}
-      </Badges>
-      <Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>
-      <Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>
-      {
-        props.social_share && (
-          <div className='flex items-center pb-14'>
-            {
-              props.social_share.map((socialShare, i) => (
-                <div className='mx-2 first:ml-0 last:mr-0'>
-                  <img src={socialShare.img_url} alt={socialShare.img_alt} />
-                </div>
-              ))
-            }
-          </div>
-        )
-      }
-      {
-        props.speaker_card && (
-          <div>
-            <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
-            {
-              props.speaker_card.map((speaker, i) => (
-                <div className='pb-4 last:pb-0'>
-                  <ProfileAvatar
-                    name={speaker.name}
-                    size='md'
-                    designation={speaker.designation}
-                    imageUrl={speaker.speakerImgUrl}
-                    avatarVariant="circle"
-                  />
-                </div>
-              ))
-            }
-          </div>
-        )
-      }
+    <div className="grid grid-cols-1 tb:grid-cols-2 gap-16 db:gap-28 tb:gap-16">
+      <div>
+        {
+          props.badgeColor && (
+            <Badges
+              color={props.badgeColor}
+              size='sm'
+            >
+              {props.talk_type}
+            </Badges>
+          )
+        }
+        {
+          props.tag_line && (<Typography textStyle='h6' className='text-blue-600 uppercase pt-4 pb-2'>{props.tag_line}</Typography>)
+        }
+        {
+          props.title && (<Typography textStyle='h3' as='h3' className='text-blue-900 pb-4'>{props.title}</Typography>)
+        }
+        {
+          props.social_share && (
+            <div className='flex items-center pb-8 tb:pb-14'>
+              {
+                props.social_share.map((socialShare, i) => (
+                  <a href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
+                    <img src={socialShare.img_url} alt={socialShare.img_alt} />
+                  </a>
+                ))
+              }
+            </div>
+          )
+        }
+        {
+          props.speaker_card && (
+            <div>
+              <Typography textStyle='h6' as='h6' className='uppercase text-neutral-500 pb-6'>speakers</Typography>
+              {
+                props.speaker_card.map((speaker, i) => (
+                  <div className='pb-4 last:pb-0'>
+                    <ProfileAvatar
+                      name={speaker.name}
+                      size='md'
+                      designation={speaker.designation}
+                      imageUrl={speaker.speakerImgUrl}
+                      avatarVariant="circle"
+                    />
+                  </div>
+                ))
+              }
+            </div>
+          )
+        }
+      </div>
+      <div>
+        <Typography textStyle="h4" as="h4" className="text-neutral-800 pb-4">About the Talk</Typography>
+        {
+          props.description && (
+            <Typography className='text-neutral-800 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0' textStyle='body1'>
+              <ReactMarkdown>{props.description}</ReactMarkdown>
+            </Typography>
+          )
+        }
+      </div>
     </div>
   )
 }
 
 TalkDetailCard.defaultProps = {
-  badgeColor: 'green',
-  badgeLeftIconColor: 'stroke-neutral-0',
-  talk_type: 'Talk',
-  tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
-  title: 'Deploying Hasura apps the fast way with the new Vercel integration',
-  social_share: '',
-  speaker_card: '',
+  // badgeColor: 'green',
+  // badgeLeftIconColor: 'stroke-neutral-0',
+  // talk_type: 'Talk',
+  // tag_line: 'June 20-22, 2023 | VIRTUAL | Free',
+  // title: 'Deploying Hasura apps the fast way with the new Vercel integration',
+  // social_share: '',
+  // speaker_card: '',
 };

package/src/HDS/components/Headers/v3Header.js

@@ -153,7 +153,7 @@ export default function V3Header(props) {
                     <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                         <span className="sr-only">Open menu</span>
                         <div className=' gap-6 flex'>
-                            <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                            {/* <Icon height={'h-5 w-5'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
                             <Icon height={'h-5 w-5'} variant={'menu05'} strokeColor={'#3970FD'} />
                         </div>
                     </Popover.Button>
@@ -166,7 +166,7 @@ export default function V3Header(props) {
 
                     <div className="flex items-center gap-6 md:ml-12">
 
-                        <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                        {/* <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} /> */}
                         <HDSButton
                             label="Log In"
                             type='tonal'

package/src/HDS/components/Hero/h2.js

@@ -167,7 +167,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
   const imageCard = (heroData) => (
     heroData.imageUrl && (
       <div className="">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full' />
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full w-1/2' />
       </div>
     )
   )
@@ -221,11 +221,13 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
         </div>
         {
           heroData.scrollArrow && (
-            <div className="flex justify-center flex-row" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
-              <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" >
-                <Icon variant='chevrondowndouble' strokeClass='stroke-neutral-800' height='h-6 w-6' />
-              </div>
-            </div>
+            <a className="flex justify-center flex-row z-10" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
+              <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" onClick={handleClick} >
+                <Icon 
+                variant='chevrondowndouble' 
+                strokeClass='stroke-neutral-800' height='h-6 w-6'  />
+              </div> 
+            </a>
           )
         }
       </div>

package/src/HDS/components/Tables/tableB.js

@@ -13,7 +13,6 @@ const tabs = [
 ]
 
 
-
 const levelCalc = (arr, index) => {
 
     const keyIndex = 'key' + `${index}`;

package/src/HDS/components/Tabs/tab.js

@@ -29,7 +29,7 @@ export default function Tab(props) {
   return (
     <div>
       <div className="block">
-        <nav className="relative inline-flex gap-2  p-2 rounded-full" aria-label="Tabs">
+        <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
           {tabs.map(tab => (
             <a
               key={tab.name}

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import {HDSColor} from '../../../foundation/ColorPalette';
 import PropTypes from 'prop-types';
+import {ReactComponent as Hasura1Icon } from "../../../assets/icons/hasura-1.svg"
+import {ReactComponent as Hasura2Icon } from "../../../assets/icons/hasura-2.svg"
+import {ReactComponent as Hasura3Icon } from "../../../assets/icons/hasura-3.svg"
 import {ReactComponent as HasuraPrimaryIcon } from "../../../assets/icons/HasuraPrimary.svg"
 import {ReactComponent as ClockrewindIcon } from "../../../assets/icons/clock-rewind.svg"
 import {ReactComponent as PassportIcon } from "../../../assets/icons/passport.svg"
@@ -1177,6 +1180,9 @@ import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg
 import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
+    hasura1: Hasura1Icon,
+    hasura2: Hasura2Icon,
+    hasura3: Hasura3Icon,
     hasuraPrimary: HasuraPrimaryIcon,
     hasura: HasuraIcon,
     minus01: Minus01Icon,

package/src/HDS/foundation/Typography/Typography.js

@@ -42,7 +42,7 @@ export default function Typography(props) {
         'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
         'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
         'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-        'quote': 'text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
+        'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
         'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
         'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
       }

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

@@ -0,0 +1 @@
+export {default as MediaBox} from './mediabox';