From c884171a5cdefcb9fef7c2bc1fee7cfab32bae09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Tue, 28 Jun 2022 16:38:13 +0200
Subject: [PATCH] Footer to CMS

---
 src/components/common/footer/index.tsx | 56 +++++++++++++++++++-------
 src/components/layout/page.tsx         |  8 +++-
 src/lib/cms/queries/footer.js          | 14 +++++++
 src/pages/404.tsx                      | 18 ++++++++-
 src/pages/_app.tsx                     |  8 ++--
 src/pages/about.tsx                    | 30 +++++++++-----
 src/pages/blog/[slug].tsx              | 12 ++++--
 src/pages/blog/index.tsx               |  9 ++++-
 src/pages/careers.tsx                  | 30 +++++++++-----
 src/pages/community.tsx                | 21 +++++-----
 src/pages/contact.tsx                  | 14 ++++---
 src/pages/index.tsx                    | 30 +++++++++-----
 src/pages/partners.tsx                 | 30 +++++++++-----
 src/pages/press.tsx                    | 13 ++++--
 src/pages/privacy-policy.tsx           | 14 +++++--
 src/pages/products.tsx                 | 33 ++++++++++-----
 src/pages/terms-of-use.tsx             | 14 +++++--
 17 files changed, 250 insertions(+), 104 deletions(-)
 create mode 100644 src/lib/cms/queries/footer.js

diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 687e247..5ac9473 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -6,6 +6,16 @@ import MailchimpSubscribe from 'react-mailchimp-subscribe'
 
 import { ArrowLink } from '~/components/icons/arrow'
 import { Isotype, LogoFooter } from '~/components/icons/logo'
+import {
+  Discord,
+  Discourse,
+  Facebook,
+  Instagram,
+  Linkedin,
+  Reddit,
+  Telegram,
+  Twitter
+} from '~/components/icons/socials'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -13,12 +23,6 @@ import Link from '~/components/primitives/link'
 import Switch from '~/components/primitives/switch'
 import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
 
-import {
-  AboutLinks,
-  ConnectLinks,
-  DevelopersLinks,
-  ProductsLinks
-} from './footer'
 import s from './footer.module.scss'
 
 type FormProps = {
@@ -81,7 +85,17 @@ const SimpleForm = ({
   )
 }
 
-export const Footer = () => {
+interface Props {
+  data: {
+    aboutLinks: { href: string; title: string }[]
+    communityLinks: { href: string; title: string }[]
+    connectLinks: { href: string; title: string }[]
+    developerLinks: { href: string; title: string }[]
+    productsLinks: { href: string; title: string }[]
+  }
+}
+
+export const Footer = ({ data }: Props) => {
   const { theme, setTheme } = useTheme()
 
   const router = useRouter()
@@ -190,7 +204,7 @@ export const Footer = () => {
             </div>
             <nav>
               <ul>
-                {DevelopersLinks.map((link) => {
+                {data.developerLinks.map((link) => {
                   return (
                     <li key={link.title}>
                       <Link href={link.href} variant="nav">
@@ -201,7 +215,7 @@ export const Footer = () => {
                 })}
               </ul>
               <ul>
-                {ProductsLinks.map((link) => {
+                {data.productsLinks.map((link) => {
                   return (
                     <li key={link.title}>
                       <Link href={link.href} variant="nav">
@@ -212,7 +226,7 @@ export const Footer = () => {
                 })}
               </ul>
               <ul>
-                {AboutLinks.map((link) => {
+                {data.aboutLinks.map((link) => {
                   return (
                     <li key={link.title}>
                       <Link href={link.href} variant="nav">
@@ -229,12 +243,19 @@ export const Footer = () => {
                   </Link>
                 </li>
                 <li>
-                  {ConnectLinks.map((link, index) => {
+                  {data?.connectLinks.map((link, index) => {
                     return (
                       <div key={`${link.title}-${index}`}>
                         <Link href={link.href} variant="unstyled">
                           <span className="sr-only">{link.title}</span>
-                          {link.logo && link.logo}
+                          {link?.title === 'Twitter' && <Twitter />}
+                          {link?.title === 'Discord' && <Discord />}
+                          {link?.title === 'Discourse' && <Discourse />}
+                          {link?.title === 'Instagram' && <Instagram />}
+                          {link?.title === 'Facebook' && <Facebook />}
+                          {link?.title === 'Telegram' && <Telegram />}
+                          {link?.title === 'Linkedin' && <Linkedin />}
+                          {link?.title === 'Reddit' && <Reddit />}
                         </Link>
                       </div>
                     )
@@ -247,12 +268,19 @@ export const Footer = () => {
             <nav className={s['sub__footer']}>
               <ul className={s['connect__links__mobile']}>
                 <li>
-                  {ConnectLinks.map((link, index) => {
+                  {data?.connectLinks.map((link, index) => {
                     return (
                       <div key={`${link.title}-${index}`}>
                         <Link href={link.href} variant="unstyled">
                           <span className="sr-only">{link.title}</span>
-                          {link.logo && link.logo}
+                          {link?.title === 'Twitter' && <Twitter />}
+                          {link?.title === 'Discord' && <Discord />}
+                          {link?.title === 'Discourse' && <Discourse />}
+                          {link?.title === 'Instagram' && <Instagram />}
+                          {link?.title === 'Facebook' && <Facebook />}
+                          {link?.title === 'Telegram' && <Telegram />}
+                          {link?.title === 'Linkedin' && <Linkedin />}
+                          {link?.title === 'Reddit' && <Reddit />}
                         </Link>
                       </div>
                     )
diff --git a/src/components/layout/page.tsx b/src/components/layout/page.tsx
index 76d3e16..86cb4d9 100644
--- a/src/components/layout/page.tsx
+++ b/src/components/layout/page.tsx
@@ -2,17 +2,23 @@ import * as React from 'react'
 
 import { CUSTOM_EASE, DURATION, ScrollSmoother } from '~/lib/gsap'
 
+import { Footer } from '../common/footer'
+import { Header } from '../common/header'
+
 type Props = {
   children?: React.ReactNode
   extras?: React.ReactNode
   smoothScroll?: boolean
+  footerData?: any
 }
 
-const ContentMemo = React.memo(({ children, extras }: Props) => {
+const ContentMemo = React.memo(({ children, extras, footerData }: Props) => {
   return (
     <>
+      <Header />
       {extras}
       <main>{children}</main>
+      <Footer data={footerData} />
     </>
   )
 })
diff --git a/src/lib/cms/queries/footer.js b/src/lib/cms/queries/footer.js
new file mode 100644
index 0000000..c5402f6
--- /dev/null
+++ b/src/lib/cms/queries/footer.js
@@ -0,0 +1,14 @@
+const FooterQuery = {
+  query: `
+              {
+                footer {
+                    aboutLinks
+                    communityLinks
+                    connectLinks
+                    developerLinks
+                    productsLinks
+                  }
+              }`
+}
+
+export { FooterQuery }
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 814c262..7e458be 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,12 +1,26 @@
 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 { request } from '../lib/datocms'
+
+export const getStaticProps = async () => {
+  const [footerData] = await Promise.all([request(FooterQuery)])
+
+  return {
+    props: {
+      footerData: footerData?.footer
+    },
+    revalidate: 60
+  }
+}
 
 import { Page } from './_app'
 
-const NotFoundPage: Page = () => {
+const NotFoundPage: Page = ({ footerData }) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero />
     </PageLayout>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5f09ac4..07deea1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -7,8 +7,8 @@ import { ThemeProvider } from 'next-themes'
 import * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
-import { Footer } from '~/components/common/footer'
-import { Header } from '~/components/common/header'
+// import { Footer } from '~/components/common/footer'
+// import { Header } from '~/components/common/header'
 import { Noise } from '~/components/common/noise'
 import { AnimationContextProvider } from '~/context/animation'
 import { basementLog, isProd } from '~/lib/constants'
@@ -66,9 +66,9 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
           <ThemeProvider enableSystem={false} defaultTheme="dark">
             <GAScripts />
             <FontsReadyScript />
-            <Header />
+            {/* <Header /> */}
             {getLayout({ Component, pageProps, ...rest })}
-            <Footer />
+            {/* <Footer /> */}
           </ThemeProvider>
         </AnimationContextProvider>
       </RealViewportProvider>
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 409d67d..f381c6b 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -18,6 +18,7 @@ import {
   AboutWhitepaper,
   Teams
 } from '~/lib/cms/queries/about'
+import { FooterQuery } from '~/lib/cms/queries/footer'
 
 import { request } from '../lib/datocms'
 
@@ -29,14 +30,21 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [heroData, teamsData, teamsPageData, whitepaperData, roadmapData] =
-    await Promise.all([
-      request(AboutHero),
-      request(Teams),
-      request(AboutTeam),
-      request(AboutWhitepaper),
-      request(AboutRoadmap)
-    ])
+  const [
+    heroData,
+    teamsData,
+    teamsPageData,
+    whitepaperData,
+    roadmapData,
+    footerData
+  ] = await Promise.all([
+    request(AboutHero),
+    request(Teams),
+    request(AboutTeam),
+    request(AboutWhitepaper),
+    request(AboutRoadmap),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
@@ -49,6 +57,7 @@ export const getStaticProps = async () => {
       whitepaperData: whitepaperData?.aboutPage,
       roadmapData: roadmapData?.aboutPage,
       teamsPageData: teamsPageData?.aboutPage,
+      footerData: footerData?.footer,
       categories,
       page:
         {
@@ -65,10 +74,11 @@ const About = ({
   teamsData,
   teamsPageData,
   roadmapData,
-  whitepaperData
+  whitepaperData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={heroData} />
       <Team teamData={teamsData} data={teamsPageData} />
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index be0b3dc..4ee1317 100644
--- a/src/pages/blog/[slug].tsx
+++ b/src/pages/blog/[slug].tsx
@@ -18,11 +18,14 @@ import Related from '~/components/sections/about/related'
 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 { siteOrigin } from '~/lib/constants'
+import { request } from '~/lib/datocms'
 
 const BlogPost = ({
   latestPosts,
-  post
+  post,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter()
 
@@ -33,7 +36,7 @@ const BlogPost = ({
   }
 
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={post} />
       <Content data={post} />
@@ -70,10 +73,13 @@ export const getStaticProps: GetStaticProps = async (
       )
     )
 
+    const [footerData] = await Promise.all([request(FooterQuery)])
+
     return {
       props: {
         latestPosts: relatedPosts.slice(0, 3),
-        post: post
+        post: post,
+        footerData: footerData?.footer
       },
       revalidate: 60
     }
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 67eec7a..2865e87 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -19,14 +19,18 @@ import SearchBar, {
   SearchContainer
 } from '~/components/sections/blog/search'
 import { CategoryFragment } from '~/lib/cms/generated'
+import { FooterQuery } from '~/lib/cms/queries/footer'
 import { getHrefWithQuery, makeQuery } from '~/lib/utils/router'
 
+import { request } from '../../lib/datocms'
+
 const getMatchingCategory = (categories: CategoryFragment[], c?: string) =>
   categories.find((cat) => cat.slug === c)
 
 const BlogIndexPage = ({
   categories,
   initialBlogPosts,
+  footerData,
   page: { heroBlogPost }
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter()
@@ -75,7 +79,7 @@ const BlogIndexPage = ({
   const hasResults = !!queriedPosts?.pages[0]?.data?.length
 
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero featuredPost={heroBlogPost} />
       <SearchContainer>
@@ -180,12 +184,15 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
+  const [footerData] = await Promise.all([request(FooterQuery)])
+
   return {
     props: {
       initialBlogPosts: {
         pagination: allBlogPosts.pagination,
         data: allBlogPosts.data.slice(0, 9)
       },
+      footerData: footerData?.footer,
       categories,
       page:
         {
diff --git a/src/pages/careers.tsx b/src/pages/careers.tsx
index 47c501d..2cafb37 100644
--- a/src/pages/careers.tsx
+++ b/src/pages/careers.tsx
@@ -18,6 +18,7 @@ import {
   CareersValues,
   CareersWhy
 } from '~/lib/cms/queries/careers'
+import { FooterQuery } from '~/lib/cms/queries/footer'
 
 import { request } from '../lib/datocms'
 
@@ -29,14 +30,21 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [heroData, valuesData, whyData, positionsData, positionsSectData] =
-    await Promise.all([
-      request(CareersHero),
-      request(CareersValues),
-      request(CareersWhy),
-      request(CareersPositions),
-      request(CareersPositionsSection)
-    ])
+  const [
+    heroData,
+    valuesData,
+    whyData,
+    positionsData,
+    positionsSectData,
+    footerData
+  ] = await Promise.all([
+    request(CareersHero),
+    request(CareersValues),
+    request(CareersWhy),
+    request(CareersPositions),
+    request(CareersPositionsSection),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
@@ -45,6 +53,7 @@ export const getStaticProps = async () => {
       positionsSectData: positionsSectData?.careersPage,
       whyData: whyData?.careersPage,
       positionsData: positionsData?.allPositions,
+      footerData: footerData?.footer,
       initialBlogPosts: {
         pagination: allBlogPosts.pagination,
         data: allBlogPosts.data.slice(0, 3)
@@ -65,10 +74,11 @@ const Careers = ({
   initialBlogPosts,
   whyData,
   positionsData,
-  positionsSectData
+  positionsSectData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={heroData} />
       <Values data={valuesData} />
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 848b3c6..da592ee 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -11,16 +11,18 @@ import {
   CommunitySocials,
   Events as EventsQuery
 } from '~/lib/cms/queries/community'
+import { FooterQuery } from '~/lib/cms/queries/footer'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [heroData, eventsData, eventsSectionData, socialsData] =
+  const [heroData, eventsData, eventsSectionData, socialsData, footerData] =
     await Promise.all([
       request(CommunityHero),
       request(EventsQuery),
       request(CommunityEvents),
-      request(CommunitySocials)
+      request(CommunitySocials),
+      request(FooterQuery)
     ])
 
   return {
@@ -28,7 +30,8 @@ export const getStaticProps = async () => {
       heroData: heroData?.communityPage,
       eventsData: eventsData?.allEvents,
       eventsSectionData: eventsSectionData?.communityPage,
-      socialsData: socialsData?.communityPage
+      socialsData: socialsData?.communityPage,
+      footerData: footerData?.footer
     },
     revalidate: 60
   }
@@ -38,16 +41,12 @@ const Community = ({
   heroData,
   eventsData,
   eventsSectionData,
-  socialsData
+  socialsData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
-      <Meta
-      // preload={[
-      //   { href: '/videos/banner-community.mp4', as: 'fetch' },
-      //   { href: '/videos/banner-community.webm', as: 'fetch' }
-      // ]}
-      />
+    <PageLayout footerData={footerData}>
+      <Meta />
       <Hero data={heroData} />
       <Events eventsData={eventsData} data={eventsSectionData} />
       <Socials data={socialsData} />
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index cda3f0e..9a388fa 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -7,21 +7,24 @@ import Form from '~/components/sections/contact/form'
 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 { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [heroData, formData, socialsData] = await Promise.all([
+  const [heroData, formData, socialsData, footerData] = await Promise.all([
     request(ContactHero),
     request(ContactForm),
-    request(CommunitySocials)
+    request(CommunitySocials),
+    request(FooterQuery)
   ])
 
   return {
     props: {
       heroData: heroData?.contactPage,
       formData: formData?.contactPage,
-      socialsData: socialsData?.communityPage
+      socialsData: socialsData?.communityPage,
+      footerData: footerData?.footer
     },
     revalidate: 60
   }
@@ -29,10 +32,11 @@ export const getStaticProps = async () => {
 const Contact = ({
   heroData,
   formData,
-  socialsData
+  socialsData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={heroData} />
       <Form data={formData} />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6911629..255bcaf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import Benefits from '~/components/sections/homepage/benefits'
 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 {
   HomeBenefits,
   HomeHero,
@@ -28,14 +29,21 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [heroData, benefitsData, othersData, latestData, testimonialsData] =
-    await Promise.all([
-      request(HomeHero),
-      request(HomeBenefits),
-      request(HomeOthers),
-      request(HomeLatest),
-      request(Testimonials)
-    ])
+  const [
+    heroData,
+    benefitsData,
+    othersData,
+    latestData,
+    testimonialsData,
+    footerData
+  ] = await Promise.all([
+    request(HomeHero),
+    request(HomeBenefits),
+    request(HomeOthers),
+    request(HomeLatest),
+    request(Testimonials),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
@@ -48,6 +56,7 @@ export const getStaticProps = async () => {
       othersData: othersData?.homePage,
       latestData: latestData?.homePage,
       testimonialsData: testimonialsData?.allTestimonials,
+      footerData: footerData?.footer,
       categories,
       page:
         {
@@ -64,10 +73,11 @@ const HomePage = ({
   benefitsData,
   latestData,
   othersData,
-  testimonialsData
+  testimonialsData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta
       // preload={[{ href: '/videos/hero-grid.mp4', as: 'fetch' }]}
       />
diff --git a/src/pages/partners.tsx b/src/pages/partners.tsx
index 5fe3453..f1838aa 100644
--- a/src/pages/partners.tsx
+++ b/src/pages/partners.tsx
@@ -10,6 +10,7 @@ import WhatOthersSay from '~/components/sections/homepage/what-others-say'
 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 { HomeOthers, Testimonials } from '~/lib/cms/queries/home'
 import {
   PartnersContact,
@@ -27,14 +28,21 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [othersData, testimonialsData, heroData, contactData, optData] =
-    await Promise.all([
-      request(HomeOthers),
-      request(Testimonials),
-      request(PartnersHero),
-      request(PartnersContact),
-      request(PartnersOportunities)
-    ])
+  const [
+    othersData,
+    testimonialsData,
+    heroData,
+    contactData,
+    optData,
+    footerData
+  ] = await Promise.all([
+    request(HomeOthers),
+    request(Testimonials),
+    request(PartnersHero),
+    request(PartnersContact),
+    request(PartnersOportunities),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
@@ -43,6 +51,7 @@ export const getStaticProps = async () => {
       heroData: heroData?.partnersPage,
       contactData: contactData?.partnersPage,
       optData: optData?.partnersPage,
+      footerData: footerData?.footer,
       initialBlogPosts: {
         pagination: allBlogPosts.pagination,
         data: allBlogPosts.data.slice(0, 3)
@@ -62,10 +71,11 @@ const Careers = ({
   testimonialsData,
   heroData,
   contactData,
-  optData
+  optData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={heroData} />
       <Opportunities data={optData} />
diff --git a/src/pages/press.tsx b/src/pages/press.tsx
index 8d62484..7fa818b 100644
--- a/src/pages/press.tsx
+++ b/src/pages/press.tsx
@@ -10,6 +10,7 @@ import Related from '~/components/sections/about/related'
 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 {
   PressFeatured,
   PressFeaturedSection,
@@ -35,14 +36,16 @@ export const getStaticProps = async () => {
     pressFeaturedData,
     pressReleases,
     pressMedia,
-    pressPress
+    pressPress,
+    footerData
   ] = await Promise.all([
     request(PressHero),
     request(PressFeaturedSection),
     request(PressFeatured),
     request(PressReleases),
     request(PressMedia),
-    request(PressPress)
+    request(PressPress),
+    request(FooterQuery)
   ])
 
   return {
@@ -53,6 +56,7 @@ export const getStaticProps = async () => {
       pressPostsData: pressReleases?.allPressReleases,
       mediaData: pressMedia?.pressPage,
       pressData: pressPress?.pressPage,
+      footerData: footerData?.footer,
       initialBlogPosts: {
         pagination: allBlogPosts?.pagination,
         data: allBlogPosts?.data.slice(0, 3)
@@ -74,10 +78,11 @@ const Newsroom = ({
   featuredPostsData,
   mediaData,
   pressData,
-  pressPostsData
+  pressPostsData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={heroData} />
       <Related
diff --git a/src/pages/privacy-policy.tsx b/src/pages/privacy-policy.tsx
index e3cdfe6..ee7f299 100644
--- a/src/pages/privacy-policy.tsx
+++ b/src/pages/privacy-policy.tsx
@@ -5,26 +5,32 @@ import { PageLayout } from '~/components/layout/page'
 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 { Privacy as PrivacyQuery } from '~/lib/cms/queries/legal'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [privacyData] = await Promise.all([request(PrivacyQuery)])
+  const [privacyData, footerData] = await Promise.all([
+    request(PrivacyQuery),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
-      privacyData: privacyData?.privacyPage
+      privacyData: privacyData?.privacyPage,
+      footerData: footerData?.footer
     },
     revalidate: 60
   }
 }
 
 const Privacy = ({
-  privacyData
+  privacyData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <div className={s.gradient}></div>
       <Meta />
       <Hero />
diff --git a/src/pages/products.tsx b/src/pages/products.tsx
index 89a0a88..6882f20 100644
--- a/src/pages/products.tsx
+++ b/src/pages/products.tsx
@@ -13,6 +13,7 @@ import Network from '~/components/sections/products/network'
 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 {
   ProductsApp,
   ProductsHero,
@@ -32,15 +33,23 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [heroData, watchersData, stackData, networkData, appData, tokenData] =
-    await Promise.all([
-      request(ProductsHero),
-      request(ProductsWatchers),
-      request(ProductsStack),
-      request(ProductsNetwork),
-      request(ProductsApp),
-      request(ProductsToken)
-    ])
+  const [
+    heroData,
+    watchersData,
+    stackData,
+    networkData,
+    appData,
+    tokenData,
+    footerData
+  ] = await Promise.all([
+    request(ProductsHero),
+    request(ProductsWatchers),
+    request(ProductsStack),
+    request(ProductsNetwork),
+    request(ProductsApp),
+    request(ProductsToken),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
@@ -54,6 +63,7 @@ export const getStaticProps = async () => {
       networkData: networkData?.productsPage,
       appData: appData?.productsPage,
       tokenData: tokenData?.productsPage,
+      footerData: footerData?.footer,
       categories,
       page:
         {
@@ -71,10 +81,11 @@ const Products = ({
   stackData,
   networkData,
   appData,
-  tokenData
+  tokenData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <Meta />
       <Hero data={heroData} />
       <Watchers data={watchersData} />
diff --git a/src/pages/terms-of-use.tsx b/src/pages/terms-of-use.tsx
index 1540560..63d592e 100644
--- a/src/pages/terms-of-use.tsx
+++ b/src/pages/terms-of-use.tsx
@@ -5,26 +5,32 @@ import { PageLayout } from '~/components/layout/page'
 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 { Terms as TermsQuery } from '~/lib/cms/queries/legal'
 
 import { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [termsData] = await Promise.all([request(TermsQuery)])
+  const [termsData, footerData] = await Promise.all([
+    request(TermsQuery),
+    request(FooterQuery)
+  ])
 
   return {
     props: {
-      termsData: termsData?.termsPage
+      termsData: termsData?.termsPage,
+      footerData: footerData?.footer
     },
     revalidate: 60
   }
 }
 
 const Terms = ({
-  termsData
+  termsData,
+  footerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <PageLayout>
+    <PageLayout footerData={footerData}>
       <div className={s.gradient}></div>
       <Meta />
       <Hero />