hds-web 1.33.2 → 1.33.4

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

@@ -0,0 +1,829 @@
+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: '/'
+}