hds-web 1.33.1 → 1.33.2

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

@@ -1,829 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Icon } from '../common-components/Icon';
-import { Typography } from '../../foundation/Typography';
-import { HDSButton } from '../Buttons';
-import { V3Dropdown } from '../Cards/Dropdown'
-import { HDSColor } from '../../foundation/ColorPalette';
-import { motion } from "framer-motion"
-import { AnimatePresence } from 'framer-motion';
-import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
-
-function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
-}
-
-const updatePGParam = (originalLink, websiteKey) => {
-    if(websiteKey){
-        const url = new URL(originalLink);
-        url.searchParams.set("pg", websiteKey);
-        return url.toString();
-    }
-    else return originalLink;
-};
-
-
-export default function V3Header(props) {
-    const listSize = props.HEADER_LIST.length;
-    const [mobileNavOpen, setmobileNavOpen] = useState(false);
-    const [isProduct, setIsProduct] = useState(false)
-    const [isDeveloper, setIsDeveloper] = useState(false)
-    const [isCompany, setIsCompany] = useState(false)
-    const [currentTab, setCurrentTab] = useState('')
-    const [isShown, setIsShown] = useState(false)
-    const [isArrowActive, setIsArrowActive] = useState(false)
-    const signUpLink = props.signUpLink ? props.signUpLink :'https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default';
-    const logInLink = props.logInLink ? props.logInLink :'https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default'
-    const signupURL = updatePGParam(signUpLink, props.website_key)
-    const loginURL = updatePGParam(logInLink, props.website_key)
-    const hideLoginButton = props.hideLoginButton;
-    //testing
-    const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
-    const handleDropdownEnter = (index) => {
-        setDropdownVisibility((prevVisibility) => {
-            const updatedVisibility = [...prevVisibility];
-            updatedVisibility[index] = true;
-            return updatedVisibility;
-        });
-    };
-
-    const handleDropdownLeave = (index) => {
-        setDropdownVisibility((prevVisibility) => {
-            const updatedVisibility = [...prevVisibility];
-            updatedVisibility[index] = false;
-            return updatedVisibility;
-        });
-    };
-
-    const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard, flyoutD) => (
-        <div>
-            <div>
-                <hr className="w-full h-6 border-0" />
-            </div>
-            <div className="p-2 bg-neutral-150 rounded-3xl">
-                <V3Dropdown
-                    primaryCard={primaryCard}
-                    secondaryCardArr={secondaryCardArr}
-                    tertiaryCard={tertiaryCard}
-                    flyoutD={flyoutD}
-                />
-            </div>
-        </div>
-    );
-
-    const renderDropdownContainer = (headerList, id) => {
-        const { title, primaryCard, secondaryCardArr, tertiaryCard, flyoutD } = headerList[id];
-
-        return (
-            <div id={`dropdown_${id}`}>
-                {headerList[id] && (
-                    <div
-                        className="relative"
-                        onMouseEnter={() => handleDropdownEnter(id)}
-                        onMouseLeave={() => handleDropdownLeave(id)}
-                    >
-                        <div
-                            className={classNames(
-                                'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
-                                dropdownVisibility[id] ? '' : 'text-gray-500'
-                            )}
-                        >
-                            <div className="flex flex-col items-center cursor-pointer">
-                                <Typography
-                                    className="hover:text-blue-600"
-                                    textStyle="body3c-medium"
-                                >
-                                    {`${title} `}
-                                </Typography>
-                            </div>
-                        </div>
-                        <motion.div>
-                            {dropdownVisibility[id] && (
-                                <div
-                                    id={`dropdown_${id}_content`}
-                                    className="left-0 z-20"
-                                    onMouseEnter={() => handleDropdownEnter(id)}
-                                    onMouseLeave={() => handleDropdownLeave(id)}
-                                    onScroll={() => handleDropdownLeave(id)}
-                                >
-                                    <motion.div
-                                        initial={{ opacity: 0 }}
-                                        animate={{ opacity: 1 }}
-                                        transition={{ ease: 'easeInOut', duration: 0.1 }}
-                                        className={"absolute -left-[137px] z-[2] transform " + (dropdownVisibility[0] ? '-left-[137px] ' : '') + (dropdownVisibility[1] ? '-left-[218px]' : '') + (dropdownVisibility[3] ? '-left-[50px] ' : '')}
-
-                                    >
-                                        {renderDropdown(
-                                            primaryCard,
-                                            secondaryCardArr,
-                                            tertiaryCard,
-                                            flyoutD
-                                        )}
-                                    </motion.div>
-                                </div>
-                            )}
-                        </motion.div>
-                    </div>
-                )}
-            </div>
-        );
-    };
-
-
-    const headerListfunction = (headerList) => (
-        <>
-            {renderDropdownContainer(headerList, 0)}
-            {renderDropdownContainer(headerList, 1)}
-            {<a href='/case-studies/'>
-
-                <Typography
-                    className="hover:text-blue-600 cursor-pointer"
-                    textStyle="body3c-medium"
-                >
-                    {`Customers `}
-                </Typography>
-            </a>
-            }
-            {renderDropdownContainer(headerList, 3)}
-           
-            {<a href='/pricing'>
-
-                <Typography
-                    className="hover:text-blue-600 cursor-pointer"
-                textStyle="body3c-medium"
-                >
-                {`Pricing `}
-            </Typography>
-                </a>
-            }
-        </>
-    );
-
-
-    //testing
-
-    const mobileNav = (HEADER_LIST) => (
-        <div className='pt-4 '>
-            <div className='transform transition-all'>
-                {isProduct && (
-                    <motion.div
-                        className='product_mobile mr-0'>
-
-                        <V3Dropdown
-                            primaryCard={HEADER_LIST[0]['primaryCard']}
-                            secondaryCardArr={HEADER_LIST[0]['secondaryCardArr']}
-                            tertiaryCard={HEADER_LIST[0]['tertiaryCard']}
-                            flyoutD={HEADER_LIST[0]['flyoutD']}
-                        />
-
-                    </motion.div>)}
-                {isDeveloper && (
-                    <div className='product_developer'>
-                        <V3Dropdown
-                            primaryCard={HEADER_LIST[1]['primaryCard']}
-                            secondaryCardArr={HEADER_LIST[1]['secondaryCardArr']}
-                            tertiaryCard={HEADER_LIST[1]['tertiaryCard']}
-                        />
-                    </div>)
-                }
-                {isCompany && (<div className='product_company'>
-                    <V3Dropdown
-                        primaryCard={HEADER_LIST[3]['primaryCard']}
-                        secondaryCardArr={HEADER_LIST[3]['secondaryCardArr']}
-                        tertiaryCard={HEADER_LIST[3]['tertiaryCard']}
-                    />
-                </div>)}
-            </div>
-        </div>
-    )
-
-
-    let class1;
-    let class2;
-    let class3;
-    if (mobileNavOpen) {
-        class1 = "rotate-45 ";
-        class2 = "opacity-0 ";
-        class3 = "-rotate-45 ";
-    }
-    if (!mobileNavOpen) {
-        class1 = " ";
-        class2 = "";
-        class3 = "translate-y-[5.8px] ";
-    }
-
-    function handleMbDropdownClose() {
-        setmobileNavOpen(!mobileNavOpen)
-        setIsDeveloper(false);
-        setIsCompany(false);
-        setIsProduct(false);
-        setCurrentTab('')
-        props.HEADER_LIST.forEach((item, index) => {
-            // Access the values of each item and the index
-            handleDropdownLeave(index)
-        });
-    }
-    function handleBackClick() {
-        setIsDeveloper(false);
-        setIsCompany(false);
-        setIsProduct(false);
-        setCurrentTab('');
-        props.HEADER_LIST.forEach((item, index) => {
-            // Access the values of each item and the index
-            handleDropdownLeave(index)
-        });
-
-    }
-
-
-    function handleMbDropdownClick(title) {
-        const i = props.HEADER_LIST.findIndex(item => item.title === title);
-        handleDropdownEnter(i);
-        // Implement your logic to open the additional options for the clicked dropdown
-        if (title === 'Developer') {
-
-            setIsDeveloper(true);
-        }
-        if (title === 'Customers') {
-
-            window.location.href = '/case-studies/'
-        }
-        if (title === 'Pricing') {
-
-            window.location.href ='/pricing/'
-        }
-        if (title === 'Product') {
-            setIsProduct(true);
-        }
-        if (title === 'Company') {
-            setIsCompany(true);
-        }
-    }
-
-    useEffect(() => {
-        if (isProduct) {
-            setCurrentTab('Product');
-        } else if (isDeveloper) {
-            setCurrentTab('Developer');
-        } else if (isCompany) {
-            setCurrentTab('Company');
-        }
-    }, [isProduct, isDeveloper, isCompany]);
-
-
-    return (
-        <div className="relative mx-auto">
-            <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-3 tb-l:justify-start`}>
-                <div className='flex flex-row justify-between items-center w-full tb-l:w-fit'>
-                    <div>
-
-                        <a href={props.headerUrl} className={"flex items-center"}>
-                            <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
-                        </a>
-                    </div>
-                    <div className='hds-hidden-tbl flex z-[10] items-center gap-6'>
-                        <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
-                            {
-                            !props.hideSearch &&
-                                (<AlgoliaSearch {...props} />)
-                            }
-                        </div>
-                        {!(isCompany || isDeveloper || isProduct) &&
-                            (
-                            <motion.div
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                transition={{ duration: 0.3, opacity: { ease: "easeIn" } }} 
-                                className='h-5 w-5 mt-3' onClick={() => handleMbDropdownClose()}>
-                                    <div className=' h-5  cursor-pointer' >
-                                        <div aria-hidden="true" className={`${class1} block  absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
-                                        <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform  transition duration-500 ease-in-out`}></div>
-                                    </div>
-
-                            </motion.div>)}
-                    </div>
-                </div>
-                <div className='hds-hidden tb-l:flex flex-row w-full  justify-between items-center'>
-
-                    <nav className="hds-hidden items-baseline relative tb-l:pl-8 tb-l:flex tb-l:space-x-6"
-                        onMouseEnter={() => setIsArrowActive(true)}
-                        onMouseLeave={() => setIsArrowActive(false)}
-
-                    >
-                        {headerListfunction(props.HEADER_LIST)}
-
-                    </nav>
-
-                    <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
-                        {
-                            !props.hideSearch &&
-                        (<AlgoliaSearch {...props} />)
-                        }
-                        <a href='/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
-                            <Typography textStyle='body3c-medium' className='text-neutral-800 hover:text-blue-600'>
-                                Contact Sales
-                            </Typography>
-                        </a>
-                        {!hideLoginButton && <a href={loginURL} >
-                            <HDSButton
-                                label="Log In"
-                                type='tonal'
-                                leftIconVariant='none'
-                                rightIconVariant='none'
-                                state='default'
-                                size='sm'
-                                rightAnimatedArrow='true'
-                                rightAnimatedArrowColor='#3970FD'
-                                animatedHoverStroke='group-hover:stroke-neutral-0'
-                                className='hds-hidden tb-l:flex'
-                            />
-                        </a>}
-                        <a href={signupURL}>
-
-                            <HDSButton
-                                label="Get Started"
-                                type='primary'
-                                leftIconVariant='none'
-                                rightIconVariant='none'
-                                state='default'
-                                size='sm'
-                                rightAnimatedArrow='true'
-                                rightAnimatedArrowColor='#ffffff'
-                                animatedHoverStroke='group-hover:stroke-neutral-0'
-                                className='hds-hidden tb:flex'
-                            />
-                        </a>
-                    </div>
-
-                </div>
-                        {/* mobile */}
-                <div className="hds-hidden-tbl overflow-auto flex ">
-                    {/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 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={"bg-neutral-100 shadow-sh1 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-0 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" + ((mobileNavOpen) ? " translate-x-0" : " translate-x-[1240px]")}>
-
-                        <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
-
-                            <div className='pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
-                                {(isCompany || isDeveloper || isProduct) &&
-                                    (
-                                        <div
-                                            className=' flex flex-row justify-start z-10'
-                                            onClick={() => handleBackClick()}
-
-                                        >
-                                            <Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
-                                        </div>
-                                    )}
-                                <motion.div
-                                    initial={{ opacity: 0 }}
-                                    animate={{ opacity: 1 }}
-                                    transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
-                                    className='w-full justify-center flex '>
-                                    <Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
-                                </motion.div>
-                                {(isCompany || isDeveloper || isProduct) &&
-                                    (
-                                        <motion.div
-                                            initial={{ opacity: 0 }}
-                                            animate={{ opacity: 1 }}
-                                            transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
-                                            className=' flex flex-row justify-start z-10'
-                                            onClick={() => handleMbDropdownClose()}
-
-                                        >
-                                            <Icon height='w-5 h-5 ml-4 stroke-2 cursor-pointer' variant={'xclose'} strokeClass='stroke-neutral-1000' />
-                                        </motion.div>)}
-
-                            </div>
-                            <AnimatePresence mode='wait' exit={false} >
-                                {(isProduct || isDeveloper || isCompany) ? (
-                                    <motion.div
-                                        key='hey'
-                                        exit={{ opacity: 0, y: [0, 300] }}
-                                        animate={{ opacity: 1, y: [300, 0] }}
-                                        transition={{ duration: 0.2, exit: { duration: 0.3 }, opacity: { ease: "easeIn" } }}
-                                        when={isProduct || isDeveloper || isCompany}
-
-                                        className="flex flex-col justify-between "
-                                    >
-                                        <div className="flex flex-col justify-between rounded-2xl h-full">
-                                            <div className="pl-4 pr-8 tb:pr-4">
-                                                {mobileNav(props.HEADER_LIST)}
-                                            </div>
-                                        </div>
-                                    </motion.div>
-                                ) : (
-                                    <motion.div
-                                        initial={{ opacity: 1 }}
-                                        animate={{ opacity: 1 }}
-                                        transition={{ duration: 0.1, opacity: { ease: "easeIn" } }}
-                                        className="mt-7 flex flex-col gap-6 ml-4"
-                                    >
-                                        <div className="flex flex-col mr-[50px] mb-m:items-center items-end">
-                                            <img
-                                                className="inline-block max-w-[242px] w-full"
-                                                src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1688572403/hasura-design-system/mutations_1_tdh5ir.png "
-                                                alt=""
-                                            />
-                                        </div>
-                                        <nav className="grid divide-y mr-8 tb:mr-4 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
-                                            {props.HEADER_LIST.map((item) => (
-                                                <div
-                                                    key={item['title']}
-                                                    onClick={() => handleMbDropdownClick(item['title'])}
-                                                    className="flex justify-between items-center p-4 cursor-pointer group"
-                                                >
-                                                    <div className="flex items-center justify-center gap-2">
-                                                        {/* <Icon height="h-5 w-5" variant="home03" strokeColor="#3970FD" /> */}
-                                                        <Typography textStyle="body3c-medium" className="text-neutral-700 hover:text-neutral-1000 transition-all duration-300 ease-in-out">
-                                                            {`${item['title']}`}
-                                                        </Typography>
-                                                    </div>
-                                                    <Icon height="h-5 w-5 stroke-[1.5px] group-hover:translate-x-1 ease-in-out transition duration-300" variant="chevronright" strokeClass="stroke-neutral-500" />
-                                                </div>
-                                            ))}
-                                        </nav>
-                                    </motion.div>
-                                )}
-                            </AnimatePresence>
-
-                        </div>
-                        <div className="py-6 shadow-sh1 bg-neutral-0 pl-4 pr-8 self-end w-full">
-
-                            <div className='flex flex-row justify-around'>
-                                <div className='w-full flex gap-2'>
-                                    {!hideLoginButton && <a href={loginURL} className='w-1/2'>
-                                        <HDSButton
-                                            label="Log In"
-                                            type='tonal'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#3970FD'
-                                            animatedHoverStroke='group-hover:stroke-neutral-0'
-                                            className=' !w-full'
-                                        />
-                                    </a>}
-                                    <a href={signupURL} className={!hideLoginButton ? 'w-1/2' : 'w-full'}>
-                                        <HDSButton
-                                            label="Get Started"
-                                            type='primary'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow='true'
-                                            rightAnimatedArrowColor='#ffffff'
-                                            animatedHoverStroke='group-hover:stroke-neutral-0'
-                                            className=' !w-full'
-                                        />
-                                    </a>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    )
-}
-
-V3Header.defaultProps = {
-    hideLoginButton:false,
-    hideSearch:false,
-    HEADER_LIST: [
-        {
-            title: 'Product',
-            primaryCard: {
-                iconVariant: 'layersthree01',
-                mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
-                primaryBtnLabel: 'Hasura Data API Platform',
-                primaryBtnCTA:'/products',
-                strokeClass: 'stroke-neutral-800',
-                tertiaryBtn: [
-                    { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare Plans', cta_link:'/pricing' }
-                ],
-                secondaryBtn: [
-                    { cta_leftVariantIcon: 'zap', cta_leftVariantIconColor: '#6C737F', cta_text: 'Deployment Options', cta_link: '/products/deployment' }
-                ],
-            },
-            secondaryCardArr:
-                [
-                    {
-                        childArray: [
-                            {
-                                description: '',
-                                href: '/products/instant-api',
-                                icon: "lightning01",
-                                name: 'Instant API',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                            {
-                                description: '',
-                                href: '/products/authorization',
-                                icon: 'eye',
-                                name: 'Authorization',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                            {
-                                description: '',
-                                href: '/products/performance',
-                                icon: 'speedometer03',
-                                name: 'Performance',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                            {
-                                description: '',
-                                href: '/products/federation',
-                                icon: 'data',
-                                name: 'Federation',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                            {
-                                description: '',
-                                href: '/products/api-security',
-                                icon: 'shieldtick',
-                                name: 'API Security',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                            {
-                                description: '',
-                                href: '/products/observability',
-                                icon: "piechart01",
-                                name: 'Observability',
-                                strokeClass: 'stroke-neutral-500'
-                            }
-                        ],
-                        label: 'CAPABILITIES'
-                    },
-                    {
-                        childArray: [
-                            {
-                                description: '',
-                                href: '/graphql/database',
-                                icon: 'database01',
-                                name: 'All Databases',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                            {
-                                description: '',
-                                href: '/graphql/database?category=planned',
-                                icon: 'checksquare',
-                                name: 'Planned Databases',
-                                strokeClass: 'stroke-neutral-500'
-                            },
-                        ],
-                        label: 'Data sources'
-                    }
-                ],
-            flyoutD:{
-                link:'https://hasura.io/ai',
-                IconVariant:'aibot',
-                btnLabel:'AI with Hasura',
-                description:'Use Hasura Notebook to get Gen AI querying over your structured private data sources via GraphQL and REST APIs'
-            }
-        },
-        {
-
-            title: 'Developer',
-            secondaryCardArr: [
-                {
-                    childArray: [
-                        {
-                            description: '',
-                            href: '/docs/latest/index/',
-                            icon: "file02",
-                            name: 'Documentation',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/hub',
-                            icon: 'hasura',
-                            name: 'Hasura Hub',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/reference-app/',
-                            icon: 'route',
-                            name: 'Guides',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/graphql/',
-                            icon: 'asterisk02',
-                            name: 'GraphQL Hub',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: 'https://cloud.hasura.io/public/graphiql',
-                            icon: "codebrowser",
-                            name: 'GraphiQL',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/changelog',
-                            icon: 'gitpullrequest',
-                            name: 'Changelog',
-                            strokeClass: 'stroke-neutral-500'
-                        }
-                    ],
-                    label: 'BUILD'
-                },
-                {
-
-                    childArray: [
-                        {
-                            description: '',
-                            href: '/blog',
-                            icon: 'bookopen01',
-                            name: 'Blog',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/learn/',
-                            icon: 'graduationhat02',
-                            name: 'Tutorials',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/events',
-                            icon: 'calendarplus02',
-                            name: 'Events',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/sample-apps/',
-                            icon: 'box',
-                            name: 'Resources',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                    ],
-                    label: 'Learn',
-
-                },
-                {
-
-                    childArray: [
-                        {
-                            description: '',
-                            href: '/community/',
-                            icon: 'users01',
-                            name: 'Community',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: 'https://discord.com/invite/hasura',
-                            icon: 'discord',
-                            name: 'Discord',
-                            strokeClass: ''
-                        },
-                        {
-                            description: '',
-                            href: 'https://github.com/hasura/graphql-engine/discussions',
-                            icon: 'octoface',
-                            name: 'Discussions',
-                            strokeClass: ''
-                        },
-                        {
-                            description: '',
-                            href: 'https://www.meetup.com/pro/hasura/',
-                            icon: 'meetup',
-                            name: 'Meetups',
-                            strokeClass: ''
-                        },
-                        {
-                            description: '',
-                            href: '/support/',
-                            icon: 'hand',
-                            name: 'Support',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                    ],
-                    label: 'Connect',
-
-                },
-            ],
-
-            tertiaryCard: [
-                {
-                    title: 'HasuraCon 2023 is here!',
-
-                    title_colorClass: 'text-neutral-900',
-                    img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
-                },
-                {
-                    title: 'Top 6 Architecture Trends for API Development',
-
-                    title_colorClass: 'text-neutral-900',
-                    img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
-                },
-                {
-                    title: 'Announcing Hasura integration with Snowflake',
-
-                    title_colorClass: 'text-neutral-900',
-                    img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
-                },
-            ]
-        },
-        {
-
-            title: 'Customers',
-            href: ''
-
-        },
-
-        {
-
-            title: 'Company',
-            secondaryCardArr: [
-                {
-                    childArray: [
-                        {
-                            description: '',
-                            href: '/about/',
-                            icon: "pentool02",
-                            name: 'Our Story',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/partners',
-                            icon: 'intersectcircle',
-                            name: 'Partners',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        {
-                            description: '',
-                            href: '/careers/',
-                            icon: 'hearthand',
-                            name: 'Work at Hasura',
-                            strokeClass: 'stroke-neutral-500'
-                        },
-                        // {
-                        //     description: '',
-                        //     href: '/press/',
-                        //     icon: 'headingsquare',
-                        //     name: 'Newsroom',
-                        //     strokeClass: 'stroke-neutral-500'
-                        // },
-                        // {
-                        //     description: '',
-                        //     href: '/brand',
-                        //     icon: 'star06',
-                        //     name: 'Brand',
-                        //     strokeClass: 'stroke-neutral-500'
-                        // },
-
-                    ],
-                    label: 'Company'
-                },
-
-            ],
-
-            tertiaryCard: [
-                {
-                    title: 'HasuraCon 2023 is here!',
-
-                    title_colorClass: 'text-neutral-900',
-                    img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
-                },
-                {
-                    title: 'Top 6 Architecture Trends for API Development',
-
-                    title_colorClass: 'text-neutral-900',
-                    img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
-                },
-                {
-                    title: 'Announcing Hasura integration with Snowflake',
-
-                    title_colorClass: 'text-neutral-900',
-                    img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
-                },
-            ]
-        },
-        {
-
-            title: 'Pricing',
-            href: ''
-
-        },
-
-
-    ],
-    headerUrl: '/'
-}