works but doesnt show up in header or footer

json/_datocms_migration_refrence/__apiExplorerQueries/productsPageQuery.js

@@ -21,6 +21,7 @@ query MyQuery {
     heroItem03
     heroItem04
     heroItem05
+    heroItem06
     heroS01Desc
     heroS01Heading
     heroS02Desc

json/site_content/productsPage.json

@@ -22,6 +22,7 @@
       "heroItem03": "Laconic Network",
       "heroItem04": "Laconic App",
       "heroItem05": "Laconic Network Token (LNT)",
+      "heroItem06": "Laconic RPC",
       "heroS01Desc": "Laconic enables simple and efficient DApp development, and the most flexible views of the Ethereum state.",
       "heroS01Heading": "DeFi",
       "heroS02Desc": "Laconic exposes cross-chain history and metadata associated with an NFT, enabling provably accurate data for DApps and Marketplaces.",
@@ -95,7 +96,21 @@
       "tokenMobileImg": {
         "url": "/images/site_content/productsPage/tokenMobileImg.jpg"
       },
-      "tokenMobileImgLight": {
+      "rpcDesc": "Highly performant RPC services",
+      "rpcHeading": "Laconic RPC",
+      "rpcImg": {
+        "url": "/images/site_content/productsPage/tokenImg.jpg"
+      },
+      "rpcImgLight": {
+        "url": "/images/site_content/productsPage/tokenImgLight.jpg"
+      },
+      "rpcItem01": "On bare metal",
+      "rpcItem02": "Very fast",
+      "rpcItem03": "Cheaper than the competition",
+      "rpcMobileImg": {
+        "url": "/images/site_content/productsPage/tokenMobileImg.jpg"
+      },
+      "rpcMobileImgLight": {
         "url": "/images/site_content/productsPage/tokenMobileImgLight.jpg"
       },
       "watchersHeading": "Laconic<br /> Watchers<br /> (SDK)",
@@ -119,4 +134,4 @@
       "watchersP02": ""
     }
   }
-}
+}

src/components/common/footer/footer.tsx

@@ -22,7 +22,8 @@ export const ProductsLinks = [
   { href: '/products/#laconicstack', title: 'Laconic Stack' },
   { href: '/products/#laconicnetwork', title: 'Laconic Network' },
   { href: '/products/#laconicapp', title: 'Laconic App' },
-  { href: '/products/#laconictoken', title: 'Laconic Network Token (LNT)' }
+  { href: '/products/#laconictoken', title: 'Laconic Network Token (LNT)' },
+  { href: '/products/#laconicrpc', title: 'Laconic RPC' }
 ]
 
 export const AboutLinks = [

src/components/common/header/header.ts

@@ -16,7 +16,8 @@ export const defaultHeaderLinks = [
       { href: '/products#laconicstack', title: 'Stack' },
       { href: '/products#laconicnetwork', title: 'Network' },
       { href: '/products#laconicapp', title: 'App' },
-      { href: '/products#laconictoken', title: 'Network Token (LNT)' }
+      { href: '/products#laconictoken', title: 'Network Token (LNT)' },
+      { href: '/products#laconicrpc', title: 'Laconic RPC' }
     ]
   },
   {

src/components/sections/products/hero/index.tsx

@@ -17,6 +17,7 @@ interface Props {
     heroItem03: string
     heroItem04: string
     heroItem05: string
+    heroItem06: string
     heroS01Heading: string
     heroS01Desc: string
     heroS02Heading: string
@@ -90,6 +91,7 @@ const Hero = ({ data }: Props) => {
                 <li>{data?.heroItem03}</li>
                 <li>{data?.heroItem04}</li>
                 <li>{data?.heroItem05}</li>
+                <li>{data?.heroItem06}</li>
               </ol>
               <div>
                 <Heading as="h2" variant="sm">

src/components/sections/products/rpc/index.tsx

@@ -0,0 +1,88 @@
+// import { Arrow } from '~/components/icons/arrow'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+
+import s from './rpc.module.scss'
+
+interface Props {
+  data: {
+    rpcHeading: string
+    rpcDesc: string
+    rpcItem01: string
+    rpcItem02: string
+    rpcItem03: string
+    rpcImg: {
+      url: string
+    }
+    rpcImgLight: {
+      url: string
+    }
+    rpcMobileImg: {
+      url: string
+    }
+    rpcMobileImgLight: {
+      url: string
+    }
+  }
+}
+
+const RPC = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const rpcImgRef = useRef<HTMLImageElement>(null)
+  const rpcImgMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!rpcImgRef.current) return
+    if (!rpcImgMobileRef.current) return
+
+    rpcImgRef.current.src =
+      theme === 'dark' ? data?.rpcImg?.url : data?.rpcImgLight?.url
+    rpcImgMobileRef.current.src =
+      theme === 'dark'
+        ? data?.rpcMobileImg?.url
+        : data?.rpcMobileImgLight?.url
+  }, [theme, data])
+
+  return (
+    <Section className={s['section']} id="laconicrpc">
+      <Container className={s['container']}>
+        <div>
+          <Heading as="h2" variant="lg">
+            {data?.rpcHeading}
+          </Heading>
+          <p>{data?.rpcDesc}</p>
+          <div className={s.mobile_img_container}>
+            <img
+              className={s.rpc__img__mobile}
+              ref={rpcImgMobileRef}
+              alt="rpc"
+            />
+          </div>
+          <p>LNT will also be used to:</p>
+          <div className={s.features}>
+            <div>
+              <img src="/images/products/tk-01.png" alt="item" />
+              <p>{data?.rpcItem01}</p>
+            </div>
+            <div>
+              <img src="/images/products/tk-03.png" alt="item" />
+              <p>{data?.rpcItem02}</p>
+            </div>
+            <div>
+              <img src="/images/products/tk-04.png" alt="item" />
+              <p>{data?.rpcItem03}</p>
+            </div>
+          </div>
+        </div>
+        <img className={s.rpc__img} ref={rpcImgRef} alt="rpc" />
+      </Container>
+    </Section>
+  )
+}
+
+export default RPC

src/components/sections/products/rpc/rpc.module.scss

@@ -0,0 +1,152 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    padding: 0;
+  }
+
+  position: relative;
+  padding: tovw(20px, 'default', 20px) 0 tovw(124px, 'default', 100px) 0;
+  margin-top: tovw(-20px, 'default', -20px);
+
+  .container {
+    @include respond-to('mobile') {
+      padding: 0 tovw(56px, 'default', 16px);
+    }
+
+    display: flex;
+    position: relative;
+
+    h2 {
+      @include respond-to('mobile') {
+        width: tovw(320px, 'mobile');
+      }
+
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+    }
+
+    div:first-child {
+      width: 100%;
+
+      > p {
+        @include respond-to('mobile') {
+          margin: 0;
+          margin-top: tovw(20px, 'mobile', 40px);
+          width: 100%;
+          max-width: 550px;
+          line-height: 1.5;
+        }
+
+        margin: 0;
+        margin-top: tovw(62px, 'default', 30px);
+        width: tovw(814px, 'default', 350px);
+        line-height: 1.3;
+        font-size: tovw(30px, 'default', 18px);
+
+        &:nth-child(4) {
+          margin-top: tovw(80px, 'default', 35px);
+        }
+      }
+
+      .features {
+        @include respond-to('mobile') {
+          display: flex;
+          flex-direction: column;
+          margin-top: tovw(40px, 'default', 40px);
+        }
+
+        display: grid;
+        margin-top: tovw(60px, 'default', 60px);
+        gap: tovw(64px, 'default', 40px) 0;
+        grid-template-columns: repeat(2, tovw(360px, 'default', 190px));
+
+        > div {
+          @include respond-to('mobile') {
+            margin: 0 tovw(10px, 'mobile');
+          }
+
+          display: grid;
+          gap: tovw(23px, 'default', 15px);
+          grid-template-columns: auto 1fr;
+
+          img {
+            flex: 1;
+            width: tovw(55px, 'default', 45px);
+          }
+
+          p {
+            @include respond-to('mobile') {
+              width: 100%;
+              margin-top: tovw(8px, 'default', 8px);
+              max-width: tovw(350px, 'default', 350px);
+            }
+
+            margin: 0;
+            margin-top: tovw(6px, 'default', 6px);
+            width: tovw(220px, 'default', 115px);
+            line-height: 1.6;
+            color: var(--color-grey-light);
+            font-size: tovw(24px, 'default', 15px);
+          }
+
+          &:last-child {
+            p {
+              @include respond-to('mobile') {
+                width: 100%;
+              }
+
+              width: tovw(265px, 'default', 150px);
+            }
+          }
+        }
+      }
+    }
+
+    .token__img {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      position: absolute;
+      bottom: tovw(-150px, 'default', -750px);
+      left: tovw(630px, 'default', 50px);
+      z-index: -1;
+      width: tovw(950px, 'default', 500px);
+      mix-blend-mode: screen;
+    }
+
+    .mobile_img_container {
+      @include respond-to('mobile') {
+        display: unset;
+        min-height: tovw(235px, 'mobile', 430px);
+      }
+
+      display: none;
+
+      .token__img__mobile {
+        @include respond-to('mobile') {
+          display: unset;
+          margin: tovw(30px, 'mobile') 0 tovw(5px, 'mobile') 0;
+          width: 100%;
+          mix-blend-mode: screen;
+          max-width: tovw(400px, 'default', 400px);
+        }
+
+        display: none;
+      }
+    }
+  }
+}
+
+[data-theme='light'] {
+  .features {
+    img {
+      filter: invert(100%);
+    }
+  }
+
+  .token__img,
+  .token__img__mobile {
+    mix-blend-mode: darken !important;
+  }
+}

src/lib/cms/queries/products.js

@@ -9,6 +9,7 @@ const ProductsHero = {
             heroItem03
             heroItem04
             heroItem05
+            heroItem06
             heroS01Desc
             heroS01Heading
             heroS02Desc
@@ -145,11 +146,37 @@ const ProductsToken = {
     `
 }
 
+const ProductsRPC = {
+  query: `
+    {
+        productsPage {
+            rpcHeading
+            rpcDesc
+            rpcImg {
+                url
+            }
+            rpcImgLight {
+                url
+            }
+            rpcItem01
+            rpcItem02
+            rpcItem03
+            rpcMobileImg {
+                url
+            }
+            rpcMobileImgLight {
+                url
+            }
+        }
+    }
+    `
+}
 export {
   ProductsApp,
   ProductsHero,
   ProductsNetwork,
   ProductsStack,
   ProductsToken,
+  ProductsRPC,
   ProductsWatchers
 }

src/pages/products.tsx

@@ -24,6 +24,7 @@ import Hero from '~/components/sections/products/hero'
 import Network from '~/components/sections/products/network'
 import Stack from '~/components/sections/products/stack'
 import Token from '~/components/sections/products/token'
+import RPC from '~/components/sections/products/rpc'
 import Watchers from '~/components/sections/products/watchers'
 import { FooterQuery } from '~/lib/cms/queries/footer'
 import { HeaderQuery } from '~/lib/cms/queries/header'
@@ -33,6 +34,7 @@ import {
   ProductsNetwork,
   ProductsStack,
   ProductsToken,
+  ProductsRPC,
   ProductsWatchers
 } from '~/lib/cms/queries/products'
 
@@ -64,6 +66,7 @@ export const getStaticProps = async () => {
     networkData,
     appData,
     tokenData,
+    rpcData,
     footerData,
     headerData
   ] = await Promise.all([
@@ -73,6 +76,7 @@ export const getStaticProps = async () => {
     request(ProductsNetwork),
     request(ProductsApp),
     request(ProductsToken),
+    request(ProductsRPC),
     request(FooterQuery),
     request(HeaderQuery)
   ])
@@ -89,6 +93,7 @@ export const getStaticProps = async () => {
       networkData: networkData?.productsPage,
       appData: appData?.productsPage,
       tokenData: tokenData?.productsPage,
+      rpcData: rpcData?.productsPage,
       footerData: footerData?.footer,
       headerData: headerData?.header,
       categories,
@@ -109,6 +114,7 @@ const Products = ({
   networkData,
   appData,
   tokenData,
+  rpcData,
   footerData,
   headerData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
@@ -121,6 +127,7 @@ const Products = ({
       <Network data={networkData} />
       <AppSection data={appData} />
       <Token data={tokenData} />
+      <RPC data={rpcData} />
       <Related blogData={initialBlogPosts?.data} reduced={true} />
     </PageLayout>
   )