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
2022-06-30 13:39:27 +02:00 · 2022-06-30 13:39:27 +02:00 · 7200a8638e
commit 7200a8638e
parent 6e809daa52
19 changed files with 279 additions and 135 deletions
--- 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);
    }
--- 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>
  )
--- 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) {
--- 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">
--- 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;
  }
 }
--- a/src/lib/cms/queries/header.js
+++ b/src/lib/cms/queries/header.js
@ -0,0 +1,10 @@
+const HeaderQuery = {
+  query: `
+                {
+                    header {
+                        navMenu
+                    }
+                }`
+}
+
+export { HeaderQuery }
--- 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>
--- 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} />
--- 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
    }
--- 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:
        {
--- 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} />
--- 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} />
--- 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} />
--- 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' }]}
      />
--- 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} />
--- 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
--- 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 />
--- 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} />
--- 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
  }