hds-web 1.6.7 → 1.6.8

package/tailwind.config.js

@@ -19,7 +19,6 @@ module.exports = {
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      petrona: ['Petrona', 'sans']
     },
     
     colors: {
@@ -169,9 +168,7 @@ module.exports = {
     extend: {
       screens: {
         'mb-s': '360px',
-        'mb-m':'400px',
         'tb': '600px',
-        'tb-m': '800px',
         'tb-l': '905px',
         'db': '1240px',
         'db-l': '2560px'
@@ -512,7 +509,7 @@ module.exports = {
         // add more for more breakpoints
 
         // body2-medium-style
-        'hds-m-body2-medium': ['0.875rem', {
+        'hds-m-body2-medium': ['875rem', {
           lineHeight: '1.5rem',
           letterSpacing: '',
           fontWeight: '500',
@@ -530,7 +527,7 @@ module.exports = {
         // add more for more breakpoints
 
         // body2-semi-bold-style
-        'hds-m-body2-semi-bold': ['0.875rem', {
+        'hds-m-body2-semi-bold': ['875rem', {
           lineHeight: '1.5rem',
           letterSpacing: '',
           fontWeight: '600',
@@ -548,7 +545,7 @@ module.exports = {
         // add more for more breakpoints
 
         // body2-bold-style
-        'hds-m-body2-bold': ['0.875rem', {
+        'hds-m-body2-bold': ['875rem', {
           lineHeight: '1.5rem',
           letterSpacing: '',
           fontWeight: '700',

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

@@ -1,3 +0,0 @@
-<svg 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

@@ -1,3 +0,0 @@
-<svg 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

@@ -1,3 +0,0 @@
-<svg 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/Cards/ImageBox/imagebox.js

@@ -1,51 +0,0 @@
-import React from "react";
-import { HDSButton } from "../../Buttons";
-import { Typography } from "../../../foundation/Typography";
-import { HDSColor } from "../../../foundation/ColorPalette";
-
-export default function ImageBox(props) {
-    const {
-        btnbutton,
-        title,
-        description,
-        className,
-        imgUrl,
-        imgAlt,
-        titleTextColor = 'text-neutral-1000',
-        imageClasses,
-        btn,
-    } = props;
-    return (
-        <div className={className}>
-            {imgUrl &&
-            <div>
-                <img src={imgUrl} alt={imgAlt} className={imageClasses} />
-                </div>}
-            {title && (
-                <Typography textStyle='h3' className={HDSColor(titleTextColor)}>{title}</Typography>
-            )
-            }
-            {description && (
-                <Typography textStyle='body1'>{description}</Typography>
-            )
-
-            }
-            {btn.btnLabel && (
-                <a href={btn.cta_link}>
-                    <HDSButton
-                        label={btn.cta_text}
-                        type={btn.cta_type}
-                        leftIconVariant='none'
-                        rightIconVariant='none'
-                        state='default'
-                        size='md'
-                        rightAnimatedArrow={true}
-                        rightAnimatedArrowColor='#3970FD'
-                    />
-                </a>
-            )
-
-            }
-        </div>
-    )
-}

package/src/HDS/components/Cards/ImageBox/index.js

@@ -1 +0,0 @@
-export {default as ImageBox} from './imagebox'

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

@@ -1,118 +0,0 @@
-import React from "react";
-import { Badges } from '../../BadgesCaption';
-import { Typography } from '../../../foundation/Typography'
-import { ProfileAvatar } from '../../Avatars'
-import { Time } from "../../../helpers/Time";
-import { HDSButton } from '../../Buttons'
-import ReactMarkdown from "react-markdown";
-import { HDSColor } from "../../../foundation/ColorPalette";
-
-export default function TalkCard2(props) {
-    let CardClass = ''
-    if (props.speakerSet) {
-        CardClass = 'tb-l:justify-between';
-    }
-    else CardClass = 'tb-l:justify-center';
-
-
-    return (
-
-        <div className="grid">
-            <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
-                <div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6  tb-l:border-r tb-l:border-r-neutral-200"}>
-                    <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
-                        {props.badges &&
-                            props.badges.map((value, index) => (
-                                <div key={index} className='flex  whitespace-nowrap'>
-                                    <Badges
-                                        size={value.size}
-                                        color={value.color}
-                                        leftIconVariant={value.leftIconVariant}
-                                        leftIconColor={value.leftIconColor}
-                                        leftIconColorClass={HDSColor(value.leftIconColorClass)}
-                                        children={value.label}
-
-                                    />
-                                </div>
-                            ))
-                        }
-
-                    </div>
-                    <div className="tb-l:w-[380px] db:w-[520px] flex flex-col tb:justify-between">
-                        <div>
-                            <Typography className='mt-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
-                            {props.para &&
-                                <Typography
-                                    className='line-clamp-3 mt-2 text-neutral-700'
-                                    textStyle='body1c'>
-                                    {props.para}
-                                </Typography>
-                            }
-                        </div>
-                        <div className="flex pb-6 tb-l:pb-0">
-                            {props.readUrl &&
-                                props.para && (
-                                    <a href={props.readUrl}>
-                                        <HDSButton
-                                            label='Read more'
-                                            type='secondaryLink'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='md'
-                                            rightAnimatedArrow={true}
-                                            rightAnimatedArrowColor='#3970FD'
-                                            className='mt-2'
-                                            btnTextColorClass='text-blue-500'
-                                            animatedHoverStroke='stroke-blue-500'
-                                        />
-                                    </a>
-                                )}
-                        </div>
-                    </div>
-                </div>
-
-                <div className={`${CardClass} tb-l:divide-y-2 divide-neutral-200 flex tb-l:w-full flex-col pt-0`} >
-                    {
-                        props.speakerSet && (
-                            <div className="px-6 py-6 border-t border-neutral-200 flex flex-col gap-6 tb:mt-0 tb-l:border-0 tb-l:h-full tb-l:justify-center  ">
-                                {props.speakerSet.map((value, i) => (
-                                    <div key={i} className="block">
-
-                                        <ProfileAvatar
-                                            name={value.name}
-                                            size='md'
-                                            designation={value.designation}
-                                            imageUrl={value.imageUrl}
-                                            avatarBgColor={props.avatarBgColor}
-                                        />
-                                    </div>
-
-                                ))}
-                            </div>
-                        )
-                    }
-                    {props.eventTime &&
-                        <div className="border-t border-neutral-200 tb-l:border-0 w-full pl-6 p-6 flex flex-row justify-between items-center">
-                            <Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
-                            {props.addCalendarUrl &&
-                                <a href={props.addCalendarUrl}>
-                                    <HDSButton
-                                        leftIconVariant='calendarplus02'
-                                        leftIconColor="#1E56E3"
-                                        rightIconVariant='none'
-                                        state='default'
-                                        size='sm'
-                                        type="iconOnly"
-                                        label=''
-                                    />
-                                </a>
-                            }
-                        </div>}
-                </div>
-            </div>
-        </div>
-
-    )
-
-}

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

@@ -1,413 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { MediaBox } from '../../helpers/Media';
-import { Typography } from '../../foundation/Typography';
-import { HDSButton } from '../../components/Buttons';
-import { HDSColor } from '../../foundation/ColorPalette';
-import { Tab } from '../../components/Tabs';
-import PropTypes from 'prop-types';
-import { LinkCard } from '../Cards/Link';
-
-const tabCard = (Content) => (
-  <>
-      <div className='tb:px-3'>
-          {Content.title &&
-              <Typography
-                  textStyle='h2'
-                  className={HDSColor(Content.titleTextColor)}>
-                  {Content.title}
-              </Typography>}
-
-          {Content.subTitle &&
-              <Typography
-                  textStyle='sub2'
-                  className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
-                  {Content.subTitle}
-              </Typography>}
-      </div>
-      {Content.btnLabel &&
-          <div className='flex pl-3 pt-6'>
-              <HDSButton
-                  label={Content.btnLabel}
-                  type='secondary'
-                  leftIconVariant='none'
-                  rightIconVariant='none'
-                  state='default'
-                  size='sm'
-                  rightAnimatedArrow={true}
-                  rightAnimatedArrowColor='#1E56E3'
-                  animatedHoverStroke='group-hover:stroke-blue-600'
-                  className='flex'
-                  btnTextColorClass='text-blue-600'
-              />
-          </div>
-      }
-
-  </>
-)
-
-export default function HeroCapability(props) {
- const {
-  heroData, 
-  activeTab, 
-  onTabChange
- } = props;
- let currentTab;
- if(activeTab.activeTab){
-  currentTab = activeTab.activeTab;
- }
- if (!heroData) {
-  return <div></div>; // Replace with your loading indicator or fallback UI
-}
-
-  const LinkCardsFn = (heroData) => {
-      return (
-        heroData.linkCards && (
-          <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row  ">
-            {heroData.linkCards.map((card, index) => (
-              <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
-                <LinkCard
-                  titleTextColor= {card.titleTextColor}
-                  descTextColor={card.descTextColor}
-                  linkUrl={card.linkUrl}
-                  cardBgColor={card.cardBgColor}
-                  cardHoverBg={card.cardHoverBg}
-                  iconVariant={card.iconVariant}
-                  iconStrokeClass={card.iconStrokeColor}
-                  iconArrowVariant={card.iconArrowVariant}
-                  iconArrowStrokeClass={card.iconArrowStrokeColor}
-                  title={card.title}
-                  description={card.description}
-                />
-              </div>
-            ))}
-          </div>
-        )
-      );
-    };
-
-
-  const handleTabClick = (tab) => {
-      if (tab.name) {
-          const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
-          onTabChange(nameCheck);
-        }
-      else return;
-      // Perform any other actions based on the clicked tab
-  }
-  let heroBgColorClass = '';
-  let bgTabClass = '';
-  let videoUrl = '';
-  let videoPoster = '';
-  let img_url = '';
-  let pillColorClass= '';
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
-      heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
-  }
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
-      bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
-  }
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
-      videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
-  }
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
-      videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
-  }
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
-      img_url = props.heroData.tabContent[currentTab]['img_url']
-  }
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
-      pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
-  }
-  if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
-      bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
-  }
-
-  return (
-      <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
-  {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
-          {props.heroData.navTabs &&
-
-              <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
-
-                  <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
-                      <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
-                          <Tab
-                              onTabClick={handleTabClick}
-                              tabs={props.heroData.navTabs}
-                              bgColorTab={props.heroData.bgColorTab}
-                              pillColor={pillColorClass}
-                          />
-                      </div>
-                  </div>
-                  <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
-                      <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
-                          {props.heroData.tabContent &&
-                              props.heroData.tabContent[currentTab] &&
-                              tabCard(props.heroData.tabContent[currentTab])}
-                      </div>
-                      <div className=' db:max-w-[540px] tb:w-1/2 '>
-                          <MediaBox
-                              video_url = {videoUrl}
-                              video_poster = {videoPoster}
-                             
-                          />
-                      </div>
-                  </div>
-
-                  <div className=''>
-                      {props.heroData.tabContent[currentTab] &&
-                          LinkCardsFn(props.heroData.tabContent[currentTab])}
-                   </div>   
-              </div>
-
-          }
-
-      </div>
-  )
-}
-
-
-
-
-HeroCapability.defaultProps={
- heroData :  {
-        tabContent: {
-          'Performance': {
-            heroBgColor:'bg-green-500',
-            title: 'Blazing-fast APIs at Global Scale ',
-            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
-            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
-            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
-            subTitleTextColor: 'text-neutral-0',
-            titleTextColor: 'text-neutral-0',
-            bgColorTab: 'bg-neutral-1000',
-            pillColor:'bg-pink-500',
-            button: [
-              {
-                cta_text: 'Get Started',
-                btnBg: '',
-                bg_color: 'bg-blue-900',
-                
-                cta_link: '',
-                cta_type:''
-              },
-              {
-                cta_text: 'Get Started',
-                btnBg: '',
-                bg_color: 'bg-blue-900',
-                cta_link: '',
-                cta_type:''
-              }
-            ],
-            linkCards: [
-              {
-                titleTextColor: 'text-neutral-0',
-                descTextColor: 'text-neutral-0',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-              {
-                cardBgColor: 'bg-pink-300',
-                cardHoverBg: 'bg-pink-900',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'GraphQL response caching',
-        
-        
-              },
-              {
-                cardBgColor: 'bg-pink-300',
-                cardHoverBg: 'bg-pink-900',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-            ],
-    
-    
-    
-    
-          },
-          'Company': {
-            heroBgColor:'bg-blue-500',
-            title: 'Leverage Hasura’s Authorization Engine',
-            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.ss',
-            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
-            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
-            imgUrl:'',
-            subTitleTextColor: 'text-neutral-0',
-            titleTextColor: 'text-neutral-0',
-            bgColorTab: 'bg-neutral-1000',
-            pillColor:'bg-amber-500',
-            button: [
-              {
-                cta_text: 'Get Started',
-                btnBg: '',
-                bg_color: 'bg-blue-900',
-                
-                cta_link: '',
-                cta_type:''
-              },
-              {
-                cta_text: 'Get Started',
-                btnBg: '',
-                bg_color: 'bg-blue-900',
-                cta_link: '',
-                cta_type:''
-              }
-            ],
-            linkCards: [
-              {
-                titleTextColor: 'text-neutral-0',
-                descTextColor: 'text-neutral-0',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-              {
-                cardBgColor: 'bg-pink-300',
-                cardHoverBg: 'bg-pink-900',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-              {
-                cardBgColor: 'bg-pink-300',
-                cardHoverBg: 'bg-pink-900',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-            ],
-    
-    
-    
-    
-          },
-          'Authorization': {
-            heroBgColor:'bg-cyan-500',
-            title: 'Blazing-fast APIs at Global Scale ',
-            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
-            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
-            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
-            imgUrl:'',
-            subTitleTextColor: 'text-neutral-0',
-            titleTextColor: 'text-neutral-0',
-            bgColorTab: 'bg-pink-500',
-            pillColor:'bg-neutral-500',
-            button: [
-              {
-                cta_text: 'Get Started',
-                btnBg: '',
-                bg_color: 'bg-blue-900',
-                
-                cta_link: '',
-                cta_type:''
-              },
-              {
-                cta_text: 'Get Started',
-                btnBg: '',
-                bg_color: 'bg-blue-900',
-                cta_link: '',
-                cta_type:''
-              }
-            ],
-            linkCards: [
-              {
-                titleTextColor: 'text-neutral-0',
-                descTextColor: 'text-neutral-0',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-              {
-                cardBgColor: 'bg-pink-300',
-                cardHoverBg: 'bg-pink-900',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-              {
-                cardBgColor: 'bg-pink-300',
-                cardHoverBg: 'bg-pink-900',
-                iconVariant: 'videorecorder',
-                iconStrokeColor: '#3970FD',
-                iconArrowVariant: 'arrownarrowupright',
-                iconArrowStrokeColor: 'blue-400',
-                title: 'Webinar',
-                description: 'Model Level Authorization System for GraphQL with Hasura',
-        
-        
-              },
-            ],
-    
-    
-    
-    
-          },
-        },
-      
-        navTabs: [
-          {
-            current: true,
-            name: 'Performance'
-          },
-          {
-            current: 'false',
-            name: 'Company'
-          },
-          {
-            current: 'false',
-            name: 'Authorization'
-          },
-          {
-            current: 'false',
-            name: 'Observability'
-          },
-          {
-            current: 'false',
-            name: 'API Security'
-          }
-        ]
-      }
-    
-}