From 7200a8638e4b51e7f50d446429122c5174d64282 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?=
 <78366796+fedealvarezcampos@users.noreply.github.com>
Date: Thu, 30 Jun 2022 13:39:27 +0200
Subject: [PATCH] Work on CMS header, minor changes (#78)

* Work on CMS header, minor changes

* Fix deploy maybe

* Fix animation mobile, fix caret

* Fix header color, etc
---
 .../common/header/header.module.scss          |  29 ++++
 src/components/common/header/index.tsx        | 155 +++++++++++-------
 src/components/layout/page.tsx                |  23 +--
 .../sections/community/events/index.tsx       |   2 +-
 .../sections/contact/hero/hero.module.scss    |   2 +-
 src/lib/cms/queries/header.js                 |  10 ++
 src/pages/404.tsx                             |  13 +-
 src/pages/about.tsx                           |  13 +-
 src/pages/blog/[slug].tsx                     |  14 +-
 src/pages/blog/index.tsx                      |  10 +-
 src/pages/careers.tsx                         |  13 +-
 src/pages/community.tsx                       |  32 ++--
 src/pages/contact.tsx                         |  23 ++-
 src/pages/index.tsx                           |  13 +-
 src/pages/partners.tsx                        |  13 +-
 src/pages/press.tsx                           |  13 +-
 src/pages/privacy-policy.tsx                  |  14 +-
 src/pages/products.tsx                        |  13 +-
 src/pages/terms-of-use.tsx                    |   9 +-
 19 files changed, 279 insertions(+), 135 deletions(-)
 create mode 100644 src/lib/cms/queries/header.js

diff --git a/src/components/common/header/header.module.scss b/src/components/common/header/header.module.scss
index f489fbb..d22d6a4 100644
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@@ -41,12 +41,22 @@
       align-items: center;
       justify-content: center;
 
+      span {
+        text-transform: none;
+        line-height: 1;
+        letter-spacing: tovw(-0.5px, 'default', -0.5px);
+        font-family: var(--font-tt-hoves);
+        font-size: tovw(16px, 'default', 14px);
+        color: var(--color-white);
+      }
+
       a.active {
         font-weight: 600 !important;
       }
 
       .no_content {
         margin-right: tovw(21px, 'default', 20px);
+        padding: 0 tovw(3px, 'default', 1px);
       }
 
       .trigger {
@@ -56,6 +66,7 @@
         background-color: unset;
         text-transform: none;
         line-height: 1;
+        padding: 0 tovw(3px, 'default', 1px);
 
         &[data-state='open'] {
           .caret {
@@ -142,6 +153,16 @@
           }
         }
 
+        span {
+          opacity: 0.6;
+          letter-spacing: tovw(-1px, 'mobile');
+          font-size: tovw(50px, 'mobile');
+
+          @media screen and (max-height: 750px) {
+            font-size: calc(var(--vh) * 5.2);
+          }
+        }
+
         div:first-child {
           display: flex;
           align-content: center;
@@ -281,6 +302,14 @@
       background-color: rgb(255 255 255 / 0.8);
     }
 
+    .list > .item {
+      .trigger {
+        .caret {
+          filter: brightness(20%);
+        }
+      }
+    }
+
     ul li a {
       color: var(--color-white);
     }
diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx
index 54d85f0..7402858 100644
--- a/src/components/common/header/index.tsx
+++ b/src/components/common/header/index.tsx
@@ -15,13 +15,23 @@ import { useMeasure } from '~/hooks/use-measure'
 import { DURATION, gsap } from '~/lib/gsap'
 
 import { ConnectLinks } from '../footer/footer'
-import { defaultHeaderLinks } from './header'
 import s from './header.module.scss'
 
+interface Props {
+  data: {
+    navMenu: {
+      href: string
+      title: string
+      content: { href: string; title: string }[]
+    }[]
+  }
+}
+
 const HeaderMobile = React.forwardRef<
   HTMLDivElement,
   JSX.IntrinsicElements['div']
->(({ className, ...props }, ref) => {
+  // @ts-ignore
+>(({ className, data, ...props }, ref) => {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
 
@@ -43,47 +53,65 @@ const HeaderMobile = React.forwardRef<
     <div {...props} className={clsx(s['header__mobile'], className)} ref={ref}>
       <NavigationMenu.Root className={s.nav}>
         <NavigationMenu.List className={s.list}>
-          {defaultHeaderLinks.map((item, i) => (
-            <NavigationMenu.Item className={s.item} key={i}>
-              {item.content ? (
-                <>
-                  <div>
-                    <Link
-                      className={clsx({
-                        [s['active']]: isActive(item.href)
-                      })}
-                      href={item.href}
-                      variant="nav"
-                      key={i}
-                    >
-                      {item.title}
-                    </Link>
-                    <NavigationMenu.Trigger className={s.trigger}>
-                      <span className={s.caret} />
-                    </NavigationMenu.Trigger>
-                  </div>
-                  <NavigationMenu.Content className={s.content}>
-                    {item.content.map((contentItem, i) => (
-                      <Link
-                        className={clsx({
-                          [s['active']]: isActive(contentItem.href)
-                        })}
-                        href={contentItem.href}
-                        variant="nav"
-                        key={i}
-                      >
-                        {contentItem.title}
-                      </Link>
-                    ))}
-                  </NavigationMenu.Content>
-                </>
-              ) : (
-                <Link href={item.href} variant="nav">
-                  {item.title}
-                </Link>
-              )}
-            </NavigationMenu.Item>
-          ))}
+          {
+            // @ts-ignore
+            data?.navMenu.map((item, i) => (
+              <NavigationMenu.Item className={s.item} key={i}>
+                {item.content.length >= 1 ? (
+                  <>
+                    <div>
+                      {item.href ? (
+                        <>
+                          {' '}
+                          <Link
+                            className={clsx({
+                              [s['active']]: isActive(item.href)
+                            })}
+                            href={item.href}
+                            variant="nav"
+                            key={i}
+                          >
+                            {item.title}
+                          </Link>
+                          <NavigationMenu.Trigger className={s.trigger}>
+                            <span className={s.caret} />
+                          </NavigationMenu.Trigger>
+                        </>
+                      ) : (
+                        <>
+                          <span>{item.title}</span>
+                          <NavigationMenu.Trigger className={s.trigger}>
+                            <span className={s.caret} />
+                          </NavigationMenu.Trigger>
+                        </>
+                      )}
+                    </div>
+                    <NavigationMenu.Content className={s.content}>
+                      {
+                        // @ts-ignore
+                        item.content.map((contentItem, i) => (
+                          <Link
+                            className={clsx({
+                              [s['active']]: isActive(contentItem.href)
+                            })}
+                            href={contentItem.href}
+                            variant="nav"
+                            key={i}
+                          >
+                            {contentItem.title}
+                          </Link>
+                        ))
+                      }
+                    </NavigationMenu.Content>
+                  </>
+                ) : (
+                  <Link href={item.href} variant="nav">
+                    {item.title}
+                  </Link>
+                )}
+              </NavigationMenu.Item>
+            ))
+          }
         </NavigationMenu.List>
         <NavigationMenu.Viewport asChild className={s.viewport} />
       </NavigationMenu.Root>
@@ -112,7 +140,7 @@ const HeaderMobile = React.forwardRef<
   )
 })
 
-export const Header = () => {
+export const Header = ({ data }: Props) => {
   const [isOpen, setIsOpen] = React.useState(false)
   const headerMobileRef = React.useRef<HTMLDivElement>(null)
   const timelineRef = React.useRef<GSAPTimeline>()
@@ -154,7 +182,7 @@ export const Header = () => {
       `.${s.item}`
     )
     const socialItems = headerMobileRef.current.querySelectorAll('.social li')
-    const button = headerMobileRef.current.querySelector('button')
+    // const button = headerMobileRef.current.querySelector('button')
     const text = headerMobileRef.current.querySelector('p')
 
     timelineRef.current = gsap.timeline({
@@ -168,8 +196,7 @@ export const Header = () => {
       },
       { xPercent: 0, duration: DURATION }
     )
-    timelineRef.current.fadeIn([navigationItems, button, socialItems, text]),
-      '>-40%'
+    timelineRef.current.fadeIn([navigationItems, socialItems, text]), '>-40%'
   }, [])
 
   useIsomorphicLayoutEffect(() => {
@@ -192,25 +219,29 @@ export const Header = () => {
           </a>
         </NextLink>
         <NavigationMenu.List className={s.list}>
-          {defaultHeaderLinks.map((item, i) => (
+          {data?.navMenu.map((item, i) => (
             <NavigationMenu.Item className={s.item} key={i}>
-              {item.content ? (
+              {item?.content?.length >= 1 ? (
                 <>
                   <NavigationMenu.Trigger className={s.trigger}>
-                    <Link
-                      className={clsx({
-                        [s['active']]: isActive(item.href)
-                      })}
-                      href={item.href}
-                      variant="nav"
-                      key={i}
-                    >
-                      {item.title}
-                    </Link>
+                    {item.href ? (
+                      <Link
+                        className={clsx({
+                          [s['active']]: isActive(item.href)
+                        })}
+                        href={item.href}
+                        variant="nav"
+                        key={i}
+                      >
+                        {item.title}
+                      </Link>
+                    ) : (
+                      <span>{item.title}</span>
+                    )}
                     <span className={s.caret} />
                   </NavigationMenu.Trigger>
                   <NavigationMenu.Content className={s.content}>
-                    {item.content.map((contentItem, i) => (
+                    {item?.content.map((contentItem, i) => (
                       <Link
                         className={clsx({
                           [s['active']]: isActive(contentItem.href)
@@ -256,7 +287,9 @@ export const Header = () => {
           />
           <span className="sr-only">Menu</span>
         </Button>
-        <HeaderMobile ref={headerMobileRef} />
+        {/*
+          // @ts-ignore */}
+        <HeaderMobile ref={headerMobileRef} data={data} />
       </div>
     </header>
   )
diff --git a/src/components/layout/page.tsx b/src/components/layout/page.tsx
index 86cb4d9..cd050cb 100644
--- a/src/components/layout/page.tsx
+++ b/src/components/layout/page.tsx
@@ -10,18 +10,21 @@ type Props = {
   extras?: React.ReactNode
   smoothScroll?: boolean
   footerData?: any
+  headerData?: any
 }
 
-const ContentMemo = React.memo(({ children, extras, footerData }: Props) => {
-  return (
-    <>
-      <Header />
-      {extras}
-      <main>{children}</main>
-      <Footer data={footerData} />
-    </>
-  )
-})
+const ContentMemo = React.memo(
+  ({ children, extras, footerData, headerData }: Props) => {
+    return (
+      <>
+        <Header data={headerData} />
+        {extras}
+        <main>{children}</main>
+        <Footer data={footerData} />
+      </>
+    )
+  }
+)
 
 export const PageLayout = (props: Props) => {
   if (props.smoothScroll) {
diff --git a/src/components/sections/community/events/index.tsx b/src/components/sections/community/events/index.tsx
index a284750..c4b5d43 100644
--- a/src/components/sections/community/events/index.tsx
+++ b/src/components/sections/community/events/index.tsx
@@ -53,7 +53,7 @@ const Events = ({ eventsData, data }: Props) => {
   })
 
   return (
-    <Section className={s['section']}>
+    <Section className={s['section']} id="events">
       <Container className={s['container']}>
         <div className={s['header']}>
           <Heading as="h2" variant="lg">
diff --git a/src/components/sections/contact/hero/hero.module.scss b/src/components/sections/contact/hero/hero.module.scss
index b1facd2..40b5e4a 100644
--- a/src/components/sections/contact/hero/hero.module.scss
+++ b/src/components/sections/contact/hero/hero.module.scss
@@ -223,7 +223,7 @@
     }
   }
 
-  .hero__container {
+  .video_container {
     mix-blend-mode: darken;
   }
 }
diff --git a/src/lib/cms/queries/header.js b/src/lib/cms/queries/header.js
new file mode 100644
index 0000000..01f4483
--- /dev/null
+++ b/src/lib/cms/queries/header.js
@@ -0,0 +1,10 @@
+const HeaderQuery = {
+  query: `
+                {
+                    header {
+                        navMenu
+                    }
+                }`
+}
+
+export { HeaderQuery }
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 7e458be..0791163 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -2,15 +2,20 @@ import { Meta } from '~/components/common/meta'
 import { PageLayout } from '~/components/layout/page'
 import Hero from '~/components/sections/404/hero'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [footerData] = await Promise.all([request(FooterQuery)])
+  const [footerData, headerData] = await Promise.all([
+    request(FooterQuery),
+    request(HeaderQuery)
+  ])
 
   return {
     props: {
-      footerData: footerData?.footer
+      footerData: footerData?.footer,
+      headerData: headerData?.header
     },
     revalidate: 60
   }
@@ -18,9 +23,9 @@ export const getStaticProps = async () => {
 
 import { Page } from './_app'
 
-const NotFoundPage: Page = ({ footerData }) => {
+const NotFoundPage: Page = ({ footerData, headerData }) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero />
     </PageLayout>
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index f381c6b..89798ee 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -19,6 +19,7 @@ import {
   Teams
 } from '~/lib/cms/queries/about'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 
 import { request } from '../lib/datocms'
 
@@ -36,14 +37,16 @@ export const getStaticProps = async () => {
     teamsPageData,
     whitepaperData,
     roadmapData,
-    footerData
+    footerData,
+    headerData
   ] = await Promise.all([
     request(AboutHero),
     request(Teams),
     request(AboutTeam),
     request(AboutWhitepaper),
     request(AboutRoadmap),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
@@ -58,6 +61,7 @@ export const getStaticProps = async () => {
       roadmapData: roadmapData?.aboutPage,
       teamsPageData: teamsPageData?.aboutPage,
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       categories,
       page:
         {
@@ -75,10 +79,11 @@ const About = ({
   teamsPageData,
   roadmapData,
   whitepaperData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Team teamData={teamsData} data={teamsPageData} />
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index 4ee1317..5f381a8 100644
--- a/src/pages/blog/[slug].tsx
+++ b/src/pages/blog/[slug].tsx
@@ -19,13 +19,15 @@ import Content from '~/components/sections/blog/post-content'
 import Hero from '~/components/sections/blog/post-hero'
 import Shares from '~/components/sections/blog/shares'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import { siteOrigin } from '~/lib/constants'
 import { request } from '~/lib/datocms'
 
 const BlogPost = ({
   latestPosts,
   post,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter()
 
@@ -36,7 +38,7 @@ const BlogPost = ({
   }
 
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={post} />
       <Content data={post} />
@@ -73,13 +75,17 @@ export const getStaticProps: GetStaticProps = async (
       )
     )
 
-    const [footerData] = await Promise.all([request(FooterQuery)])
+    const [footerData, headerData] = await Promise.all([
+      request(FooterQuery),
+      request(HeaderQuery)
+    ])
 
     return {
       props: {
         latestPosts: relatedPosts.slice(0, 3),
         post: post,
-        footerData: footerData?.footer
+        footerData: footerData?.footer,
+        headerData: headerData?.header
       },
       revalidate: 60
     }
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 2865e87..d26f452 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -20,6 +20,7 @@ import SearchBar, {
 } from '~/components/sections/blog/search'
 import { CategoryFragment } from '~/lib/cms/generated'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import { getHrefWithQuery, makeQuery } from '~/lib/utils/router'
 
 import { request } from '../../lib/datocms'
@@ -31,6 +32,7 @@ const BlogIndexPage = ({
   categories,
   initialBlogPosts,
   footerData,
+  headerData,
   page: { heroBlogPost }
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter()
@@ -79,7 +81,7 @@ const BlogIndexPage = ({
   const hasResults = !!queriedPosts?.pages[0]?.data?.length
 
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero featuredPost={heroBlogPost} />
       <SearchContainer>
@@ -184,7 +186,10 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [footerData] = await Promise.all([request(FooterQuery)])
+  const [footerData, headerData] = await Promise.all([
+    request(FooterQuery),
+    request(HeaderQuery)
+  ])
 
   return {
     props: {
@@ -193,6 +198,7 @@ export const getStaticProps = async () => {
         data: allBlogPosts.data.slice(0, 9)
       },
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       categories,
       page:
         {
diff --git a/src/pages/careers.tsx b/src/pages/careers.tsx
index 2cafb37..b446d1d 100644
--- a/src/pages/careers.tsx
+++ b/src/pages/careers.tsx
@@ -19,6 +19,7 @@ import {
   CareersWhy
 } from '~/lib/cms/queries/careers'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 
 import { request } from '../lib/datocms'
 
@@ -36,14 +37,16 @@ export const getStaticProps = async () => {
     whyData,
     positionsData,
     positionsSectData,
-    footerData
+    footerData,
+    headerData
   ] = await Promise.all([
     request(CareersHero),
     request(CareersValues),
     request(CareersWhy),
     request(CareersPositions),
     request(CareersPositionsSection),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
@@ -54,6 +57,7 @@ export const getStaticProps = async () => {
       whyData: whyData?.careersPage,
       positionsData: positionsData?.allPositions,
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       initialBlogPosts: {
         pagination: allBlogPosts.pagination,
         data: allBlogPosts.data.slice(0, 3)
@@ -75,10 +79,11 @@ const Careers = ({
   whyData,
   positionsData,
   positionsSectData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Values data={valuesData} />
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index da592ee..968682e 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -12,18 +12,26 @@ import {
   Events as EventsQuery
 } from '~/lib/cms/queries/community'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [heroData, eventsData, eventsSectionData, socialsData, footerData] =
-    await Promise.all([
-      request(CommunityHero),
-      request(EventsQuery),
-      request(CommunityEvents),
-      request(CommunitySocials),
-      request(FooterQuery)
-    ])
+  const [
+    heroData,
+    eventsData,
+    eventsSectionData,
+    socialsData,
+    footerData,
+    headerData
+  ] = await Promise.all([
+    request(CommunityHero),
+    request(EventsQuery),
+    request(CommunityEvents),
+    request(CommunitySocials),
+    request(FooterQuery),
+    request(HeaderQuery)
+  ])
 
   return {
     props: {
@@ -31,7 +39,8 @@ export const getStaticProps = async () => {
       eventsData: eventsData?.allEvents,
       eventsSectionData: eventsSectionData?.communityPage,
       socialsData: socialsData?.communityPage,
-      footerData: footerData?.footer
+      footerData: footerData?.footer,
+      headerData: headerData?.header
     },
     revalidate: 60
   }
@@ -42,10 +51,11 @@ const Community = ({
   eventsData,
   eventsSectionData,
   socialsData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Events eventsData={eventsData} data={eventsSectionData} />
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 9a388fa..933d6e6 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -8,23 +8,27 @@ import Hero from '~/components/sections/contact/hero'
 import { CommunitySocials } from '~/lib/cms/queries/community'
 import { ContactForm, ContactHero } from '~/lib/cms/queries/contact'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [heroData, formData, socialsData, footerData] = await Promise.all([
-    request(ContactHero),
-    request(ContactForm),
-    request(CommunitySocials),
-    request(FooterQuery)
-  ])
+  const [heroData, formData, socialsData, footerData, headerData] =
+    await Promise.all([
+      request(ContactHero),
+      request(ContactForm),
+      request(CommunitySocials),
+      request(FooterQuery),
+      request(HeaderQuery)
+    ])
 
   return {
     props: {
       heroData: heroData?.contactPage,
       formData: formData?.contactPage,
       socialsData: socialsData?.communityPage,
-      footerData: footerData?.footer
+      footerData: footerData?.footer,
+      headerData: headerData?.header
     },
     revalidate: 60
   }
@@ -33,10 +37,11 @@ const Contact = ({
   heroData,
   formData,
   socialsData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Form data={formData} />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 255bcaf..885a2b9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,6 +11,7 @@ import Hero from '~/components/sections/homepage/hero'
 import LatestNews from '~/components/sections/homepage/latest-news'
 import WhatOthersSay from '~/components/sections/homepage/what-others-say'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import {
   HomeBenefits,
   HomeHero,
@@ -35,14 +36,16 @@ export const getStaticProps = async () => {
     othersData,
     latestData,
     testimonialsData,
-    footerData
+    footerData,
+    headerData
   ] = await Promise.all([
     request(HomeHero),
     request(HomeBenefits),
     request(HomeOthers),
     request(HomeLatest),
     request(Testimonials),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
@@ -57,6 +60,7 @@ export const getStaticProps = async () => {
       latestData: latestData?.homePage,
       testimonialsData: testimonialsData?.allTestimonials,
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       categories,
       page:
         {
@@ -74,10 +78,11 @@ const HomePage = ({
   latestData,
   othersData,
   testimonialsData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta
       // preload={[{ href: '/videos/hero-grid.mp4', as: 'fetch' }]}
       />
diff --git a/src/pages/partners.tsx b/src/pages/partners.tsx
index f1838aa..5468b06 100644
--- a/src/pages/partners.tsx
+++ b/src/pages/partners.tsx
@@ -11,6 +11,7 @@ import Contact from '~/components/sections/partners/contact'
 import Hero from '~/components/sections/partners/hero'
 import Opportunities from '~/components/sections/partners/opportunities'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import { HomeOthers, Testimonials } from '~/lib/cms/queries/home'
 import {
   PartnersContact,
@@ -34,14 +35,16 @@ export const getStaticProps = async () => {
     heroData,
     contactData,
     optData,
-    footerData
+    footerData,
+    headerData
   ] = await Promise.all([
     request(HomeOthers),
     request(Testimonials),
     request(PartnersHero),
     request(PartnersContact),
     request(PartnersOportunities),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
@@ -52,6 +55,7 @@ export const getStaticProps = async () => {
       contactData: contactData?.partnersPage,
       optData: optData?.partnersPage,
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       initialBlogPosts: {
         pagination: allBlogPosts.pagination,
         data: allBlogPosts.data.slice(0, 3)
@@ -72,10 +76,11 @@ const Careers = ({
   heroData,
   contactData,
   optData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Opportunities data={optData} />
diff --git a/src/pages/press.tsx b/src/pages/press.tsx
index 7fa818b..ac61a1d 100644
--- a/src/pages/press.tsx
+++ b/src/pages/press.tsx
@@ -11,6 +11,7 @@ import Hero from '~/components/sections/newsroom/hero'
 import Media from '~/components/sections/newsroom/media'
 import Press from '~/components/sections/newsroom/press'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import {
   PressFeatured,
   PressFeaturedSection,
@@ -37,7 +38,8 @@ export const getStaticProps = async () => {
     pressReleases,
     pressMedia,
     pressPress,
-    footerData
+    footerData,
+    headerData
   ] = await Promise.all([
     request(PressHero),
     request(PressFeaturedSection),
@@ -45,7 +47,8 @@ export const getStaticProps = async () => {
     request(PressReleases),
     request(PressMedia),
     request(PressPress),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
@@ -57,6 +60,7 @@ export const getStaticProps = async () => {
       mediaData: pressMedia?.pressPage,
       pressData: pressPress?.pressPage,
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       initialBlogPosts: {
         pagination: allBlogPosts?.pagination,
         data: allBlogPosts?.data.slice(0, 3)
@@ -79,10 +83,11 @@ const Newsroom = ({
   mediaData,
   pressData,
   pressPostsData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Related
diff --git a/src/pages/privacy-policy.tsx b/src/pages/privacy-policy.tsx
index ee7f299..63538b1 100644
--- a/src/pages/privacy-policy.tsx
+++ b/src/pages/privacy-policy.tsx
@@ -6,20 +6,23 @@ import Hero from '~/components/sections/privacy/hero'
 import s from '~/components/sections/privacy/hero/hero.module.scss'
 import PrivacyPolicy from '~/components/sections/privacy/privacypolicy'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import { Privacy as PrivacyQuery } from '~/lib/cms/queries/legal'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [privacyData, footerData] = await Promise.all([
+  const [privacyData, footerData, headerData] = await Promise.all([
     request(PrivacyQuery),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
     props: {
       privacyData: privacyData?.privacyPage,
-      footerData: footerData?.footer
+      footerData: footerData?.footer,
+      headerData: headerData?.header
     },
     revalidate: 60
   }
@@ -27,10 +30,11 @@ export const getStaticProps = async () => {
 
 const Privacy = ({
   privacyData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <div className={s.gradient}></div>
       <Meta />
       <Hero />
diff --git a/src/pages/products.tsx b/src/pages/products.tsx
index 6882f20..f85e708 100644
--- a/src/pages/products.tsx
+++ b/src/pages/products.tsx
@@ -14,6 +14,7 @@ import Stack from '~/components/sections/products/stack'
 import Token from '~/components/sections/products/token'
 import Watchers from '~/components/sections/products/watchers'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import {
   ProductsApp,
   ProductsHero,
@@ -40,7 +41,8 @@ export const getStaticProps = async () => {
     networkData,
     appData,
     tokenData,
-    footerData
+    footerData,
+    headerData
   ] = await Promise.all([
     request(ProductsHero),
     request(ProductsWatchers),
@@ -48,7 +50,8 @@ export const getStaticProps = async () => {
     request(ProductsNetwork),
     request(ProductsApp),
     request(ProductsToken),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
@@ -64,6 +67,7 @@ export const getStaticProps = async () => {
       appData: appData?.productsPage,
       tokenData: tokenData?.productsPage,
       footerData: footerData?.footer,
+      headerData: headerData?.header,
       categories,
       page:
         {
@@ -82,10 +86,11 @@ const Products = ({
   networkData,
   appData,
   tokenData,
-  footerData
+  footerData,
+  headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout footerData={footerData}>
+    <PageLayout footerData={footerData} headerData={headerData}>
       <Meta />
       <Hero data={heroData} />
       <Watchers data={watchersData} />
diff --git a/src/pages/terms-of-use.tsx b/src/pages/terms-of-use.tsx
index 63d592e..89efd21 100644
--- a/src/pages/terms-of-use.tsx
+++ b/src/pages/terms-of-use.tsx
@@ -6,20 +6,23 @@ import Hero from '~/components/sections/terms/hero'
 import s from '~/components/sections/terms/hero/hero.module.scss'
 import TermsOfUse from '~/components/sections/terms/termsofuse'
 import { FooterQuery } from '~/lib/cms/queries/footer'
+import { HeaderQuery } from '~/lib/cms/queries/header'
 import { Terms as TermsQuery } from '~/lib/cms/queries/legal'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [termsData, footerData] = await Promise.all([
+  const [termsData, footerData, headerData] = await Promise.all([
     request(TermsQuery),
-    request(FooterQuery)
+    request(FooterQuery),
+    request(HeaderQuery)
   ])
 
   return {
     props: {
       termsData: termsData?.termsPage,
-      footerData: footerData?.footer
+      footerData: footerData?.footer,
+      headerData: headerData?.header
     },
     revalidate: 60
   }