From 047aef8759869b126a2e7bd93a06d49aab46d82b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Tue, 24 May 2022 16:11:55 +0200
Subject: [PATCH] Add CMS content, styles

---
 .../sections/about/hero/hero.module.scss      |  4 ++
 .../sections/about/related/index.tsx          | 11 ++--
 .../sections/homepage/hero/hero.module.scss   |  2 +-
 .../sections/newsroom/hero/index.tsx          | 40 ++++---------
 .../sections/newsroom/media/index.tsx         | 28 ++++++---
 .../sections/newsroom/press/index.tsx         | 10 +++-
 .../sections/products/hero/hero.module.scss   |  5 +-
 src/lib/cms/queries/press.js                  | 60 ++++++++++++++++++-
 src/pages/about.tsx                           |  2 +-
 src/pages/blog/[slug].tsx                     |  2 +-
 src/pages/careers.tsx                         |  2 +-
 src/pages/partners.tsx                        |  1 -
 src/pages/press.tsx                           | 43 ++++++++++---
 src/pages/products.tsx                        |  2 +-
 14 files changed, 152 insertions(+), 60 deletions(-)

diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index 7ddf957..4fd243f 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -17,6 +17,7 @@
     position: relative;
     align-self: center;
     width: 102%;
+    min-height: tovw(875px, 'default', 414px);
     margin-top: tovw(-165px, 'default');
     padding-top: tovw(30px, 'default', 20px);
     mix-blend-mode: lighten;
@@ -81,6 +82,8 @@
       place-content: space-between;
     }
 
+    z-index: 5;
+
     h1 {
       @include respond-to('mobile') {
         width: 90%;
@@ -127,6 +130,7 @@
     display: flex;
     justify-content: space-between;
     gap: tovw(60px, 'default', 20px);
+    z-index: 5;
 
     div {
       &:first-child {
diff --git a/src/components/sections/about/related/index.tsx b/src/components/sections/about/related/index.tsx
index 4440939..32cb02d 100644
--- a/src/components/sections/about/related/index.tsx
+++ b/src/components/sections/about/related/index.tsx
@@ -16,10 +16,13 @@ export interface Props {
   isInPost?: boolean
   isFeatured?: boolean
   reduced?: boolean
-  data: any
+  data?: {
+    featuredHeading?: string
+  }
+  blogData: any
 }
 
-const Related = ({ data, isInPost, isFeatured, reduced }: Props) => {
+const Related = ({ data, blogData, isInPost, isFeatured, reduced }: Props) => {
   const [sliderRef] = useKeenSlider<HTMLDivElement>({
     initial: 0,
     loop: true,
@@ -45,13 +48,13 @@ const Related = ({ data, isInPost, isFeatured, reduced }: Props) => {
       <Container className={clsx(s['heading'], isInPost && s.altheader)}>
         <Heading as="h2" variant="lg">
           {isInPost && !isFeatured && 'Related articles'}
-          {isFeatured && !isInPost && 'Featured articles'}
+          {isFeatured && !isInPost && data?.featuredHeading}
           {!isFeatured && !isInPost && 'Learn more'}
         </Heading>
       </Container>
       <div className={s['slider__container']}>
         <div className={clsx(s['events'], 'keen-slider')} ref={sliderRef}>
-          {data.map((item: any, i: Key) => (
+          {blogData.map((item: any, i: Key) => (
             <Card
               key={i}
               data={item}
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index b6d5f07..7cbdfab 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -52,7 +52,7 @@
         rgb(255 255 255 / 0) 90%,
         var(--color-black) 100%
       );
-    width: 100%;
+    width: 101%;
     height: 101%;
     content: '';
     pointer-events: none;
diff --git a/src/components/sections/newsroom/hero/index.tsx b/src/components/sections/newsroom/hero/index.tsx
index a366ef8..e09d9e0 100644
--- a/src/components/sections/newsroom/hero/index.tsx
+++ b/src/components/sections/newsroom/hero/index.tsx
@@ -7,16 +7,16 @@ import Heading from '~/components/primitives/heading'
 
 import s from './hero.module.scss'
 
-// interface Props {
-//   data: {
-//     heroHeading: string
-//     heroLine: string
-//   }
-// }
-
-const Hero = () => {
-  // const heroVideoRef = useRef<HTMLVideoElement>(null)
+interface Props {
+  data: {
+    heroHeading: string
+    heroLine: string
+    heroButtonLabel: string
+    heroButtonLink: string
+  }
+}
 
+const Hero = ({ data }: Props) => {
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
@@ -26,20 +26,6 @@ const Hero = () => {
         alt="hero"
         src="/images/press/press.png"
       />
-      {/* <div className={s.video_container}>
-        <video
-          autoPlay
-          ref={heroVideoRef}
-          controls={false}
-          loop
-          muted
-          playsInline={true}
-          preload="true"
-        >
-          <source src="/videos/banner-products.webm" type="video/webm" />
-          <source src="/videos/banner-products.mp4" type="video/mp4" />
-        </video>
-      </div> */}
       <img
         className={s.hero__mobile}
         loading="eager"
@@ -50,7 +36,7 @@ const Hero = () => {
         <div className={s.body}>
           <div>
             <Heading as="h1" variant="xl">
-              Newsroom
+              {data?.heroHeading}
             </Heading>
             <Arrow className={s['arrow']} />
           </div>
@@ -58,11 +44,11 @@ const Hero = () => {
             <div className={s.text__container}>
               <Line className={s.line} height={144} />
               <Heading as="h2" variant="sm">
-                Contact press at laconic.com for press inquiries.
+                {data?.heroLine}
               </Heading>
             </div>
-            <ButtonLink variant="primary" href="https://google.com">
-              Get in touch
+            <ButtonLink variant="primary" href={data?.heroButtonLink}>
+              {data?.heroButtonLabel}
             </ButtonLink>
           </div>
         </div>
diff --git a/src/components/sections/newsroom/media/index.tsx b/src/components/sections/newsroom/media/index.tsx
index 90da2a5..501dca6 100644
--- a/src/components/sections/newsroom/media/index.tsx
+++ b/src/components/sections/newsroom/media/index.tsx
@@ -6,11 +6,21 @@ import Heading from '~/components/primitives/heading'
 
 import s from './media.module.scss'
 
-// interface Props {
-//     data: {}
-// }
+interface Props {
+  data: {
+    mediaHeading: string
+    mediaVideo01Label: string
+    mediaVideo01Link: string
+    mediaVideo02Label: string
+    mediaVideo02Link: string
+    mediaVideo03Label: string
+    mediaVideo03Link: string
+    mediaVideo04Label: string
+    mediaVideo04Link: string
+  }
+}
 
-const Media = () => {
+const Media = ({ data }: Props) => {
   const [sliderRef] = useKeenSlider<HTMLDivElement>({
     initial: 0,
     loop: true,
@@ -30,7 +40,7 @@ const Media = () => {
       <Container className={s['container']}>
         <div className={s['header']}>
           <Heading as="h2" variant="md">
-            Media
+            {data?.mediaHeading}
           </Heading>
           <span>04</span>
         </div>
@@ -51,7 +61,7 @@ const Media = () => {
             </div>
             <div className={s['content']}>
               <Heading as="h2" variant="sm" font="tthoves">
-                Introducing Laconic video
+                {data?.mediaVideo01Label}
               </Heading>
             </div>
           </div>
@@ -71,7 +81,7 @@ const Media = () => {
             </div>
             <div className={s['content']}>
               <Heading as="h2" variant="sm" font="tthoves">
-                Introducing Laconic video
+                {data?.mediaVideo02Label}
               </Heading>
             </div>
           </div>
@@ -91,7 +101,7 @@ const Media = () => {
             </div>
             <div className={s['content']}>
               <Heading as="h2" variant="sm" font="tthoves">
-                Introducing Laconic video
+                {data?.mediaVideo03Label}
               </Heading>
             </div>
           </div>
@@ -111,7 +121,7 @@ const Media = () => {
             </div>
             <div className={s['content']}>
               <Heading as="h2" variant="sm" font="tthoves">
-                Introducing Laconic video
+                {data?.mediaVideo04Label}
               </Heading>
             </div>
           </div>
diff --git a/src/components/sections/newsroom/press/index.tsx b/src/components/sections/newsroom/press/index.tsx
index 6189a85..a689b83 100644
--- a/src/components/sections/newsroom/press/index.tsx
+++ b/src/components/sections/newsroom/press/index.tsx
@@ -13,10 +13,14 @@ import s from './press.module.scss'
 
 // TODO
 export interface Props {
+  data: {
+    pressHeading: string
+    pressHeadingNumber: string
+  }
   blogData: any
 }
 
-const Press = ({ blogData }: Props) => {
+const Press = ({ data, blogData }: Props) => {
   const [loaded, setLoaded] = useState(false)
 
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
@@ -43,9 +47,9 @@ const Press = ({ blogData }: Props) => {
       <Container className={s.heading}>
         <div className={s['header']}>
           <Heading as="h2" variant="md">
-            Press Releases
+            {data?.pressHeading}
           </Heading>
-          <span>04</span>
+          <span>{data?.pressHeadingNumber}</span>
         </div>
       </Container>
       <div className={s['slider__container']}>
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index 07f811e..8614c30 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -27,10 +27,11 @@
 
     align-self: center;
     position: relative;
+    width: 82%;
+    min-height: tovw(914px, 'default', 434px);
     margin-top: tovw(-165px, 'default');
     margin-bottom: tovw(-140px, 'default');
     padding-top: tovw(30px, 'default', 20px);
-    width: 82%;
     mix-blend-mode: lighten;
 
     video {
@@ -89,6 +90,7 @@
 
       margin: 0;
       text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+      z-index: 5;
     }
 
     ol {
@@ -136,6 +138,7 @@
       display: grid;
       gap: tovw(113px, 'default', 40px);
       grid-template-columns: 1fr 1.15fr;
+      z-index: 5;
 
       p:first-child {
         @include respond-to('mobile') {
diff --git a/src/lib/cms/queries/press.js b/src/lib/cms/queries/press.js
index f5c49f1..aa0d6fb 100644
--- a/src/lib/cms/queries/press.js
+++ b/src/lib/cms/queries/press.js
@@ -1,3 +1,55 @@
+const PressHero = {
+  query: `
+          {
+            pressPage {
+                heroButtonLabel
+                heroButtonLink
+                heroHeading
+                heroLine
+            }
+          }
+          `
+}
+
+const PressMedia = {
+  query: `
+          {
+            pressPage {
+                mediaHeading
+                mediaVideo01Label
+                mediaVideo01Link
+                mediaVideo02Label
+                mediaVideo02Link
+                mediaVideo03Label
+                mediaVideo03Link
+                mediaVideo04Label
+                mediaVideo04Link
+            }
+          }
+          `
+}
+
+const PressPress = {
+  query: `
+          {
+            pressPage {
+                pressHeading
+                pressHeadingNumber
+            }
+          }
+          `
+}
+
+const PressFeaturedSection = {
+  query: `
+          {
+            pressPage {
+                featuredHeading
+            }
+          }
+          `
+}
+
 const PressFeatured = {
   query: `
           {
@@ -23,4 +75,10 @@ const PressFeatured = {
           `
 }
 
-export { PressFeatured }
+export {
+  PressFeatured,
+  PressFeaturedSection,
+  PressHero,
+  PressMedia,
+  PressPress
+}
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 3f0b39a..409d67d 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -74,7 +74,7 @@ const About = ({
       <Team teamData={teamsData} data={teamsPageData} />
       <Whitepaper data={whitepaperData} />
       <Roadmap data={roadmapData} />
-      <Related data={initialBlogPosts?.data} reduced={true} />
+      <Related blogData={initialBlogPosts?.data} reduced={true} />
     </PageLayout>
   )
 }
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index 7ebfe7b..be0b3dc 100644
--- a/src/pages/blog/[slug].tsx
+++ b/src/pages/blog/[slug].tsx
@@ -38,7 +38,7 @@ const BlogPost = ({
       <Hero data={post} />
       <Content data={post} />
       <Shares url={completeUrl} />
-      {latestPosts?.length > 0 && <Related isInPost data={latestPosts} />}
+      {latestPosts?.length > 0 && <Related isInPost blogData={latestPosts} />}
     </PageLayout>
   )
 }
diff --git a/src/pages/careers.tsx b/src/pages/careers.tsx
index 17a5adb..47c501d 100644
--- a/src/pages/careers.tsx
+++ b/src/pages/careers.tsx
@@ -74,7 +74,7 @@ const Careers = ({
       <Values data={valuesData} />
       <WhyJoin data={whyData} />
       <Positions data={positionsSectData} positionsData={positionsData} />
-      <Related data={initialBlogPosts?.data} reduced={true} />
+      <Related blogData={initialBlogPosts?.data} reduced={true} />
     </PageLayout>
   )
 }
diff --git a/src/pages/partners.tsx b/src/pages/partners.tsx
index a9558b8..bca0eb1 100644
--- a/src/pages/partners.tsx
+++ b/src/pages/partners.tsx
@@ -8,7 +8,6 @@ import { Meta } from '~/components/common/meta'
 import { PageLayout } from '~/components/layout/page'
 import WhatOthersSay from '~/components/sections/homepage/what-others-say'
 import Contact from '~/components/sections/partners/contact'
-// import Related from '~/components/sections/about/related'
 import Hero from '~/components/sections/partners/hero'
 import Opportunities from '~/components/sections/partners/opportunities'
 import { HomeOthers, Testimonials } from '~/lib/cms/queries/home'
diff --git a/src/pages/press.tsx b/src/pages/press.tsx
index b8f12b8..b51d540 100644
--- a/src/pages/press.tsx
+++ b/src/pages/press.tsx
@@ -10,7 +10,13 @@ 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 { PressFeatured } from '~/lib/cms/queries/press'
+import {
+  PressFeatured,
+  PressFeaturedSection,
+  PressHero,
+  PressMedia,
+  PressPress
+} from '~/lib/cms/queries/press'
 
 import { request } from '../lib/datocms'
 
@@ -22,12 +28,22 @@ export const getStaticProps = async () => {
 
   const heroBlogPost = allBlogPosts.data[0]
 
-  const [pressData] = await Promise.all([request(PressFeatured)])
+  const [pressHero, pressFeatured, pressFeaturedData, pressMedia, pressPress] =
+    await Promise.all([
+      request(PressHero),
+      request(PressFeaturedSection),
+      request(PressFeatured),
+      request(PressMedia),
+      request(PressPress)
+    ])
 
   return {
     props: {
-      //   heroData: heroData?.careersPage,
-      pressData: pressData?.allBlogPosts?.slice(0, 3),
+      heroData: pressHero?.pressPage,
+      featuredData: pressFeatured?.pressPage,
+      featuredPostsData: pressFeaturedData?.allBlogPosts?.slice(0, 3),
+      mediaData: pressMedia?.pressPage,
+      pressData: pressPress?.pressPage,
       initialBlogPosts: {
         pagination: allBlogPosts?.pagination,
         data: allBlogPosts?.data.slice(0, 3)
@@ -44,16 +60,25 @@ export const getStaticProps = async () => {
 
 const Newsroom = ({
   initialBlogPosts,
+  heroData,
+  featuredData,
+  featuredPostsData,
+  mediaData,
   pressData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Meta />
-      <Hero />
-      <Related data={pressData} isFeatured={true} reduced={false} />
-      <Press blogData={initialBlogPosts?.data} />
-      <Media />
-      <Related data={initialBlogPosts?.data} reduced={true} />
+      <Hero data={heroData} />
+      <Related
+        data={featuredData}
+        blogData={featuredPostsData}
+        isFeatured={true}
+        reduced={false}
+      />
+      <Press data={pressData} blogData={initialBlogPosts?.data} />
+      <Media data={mediaData} />
+      <Related blogData={initialBlogPosts?.data} reduced={true} />
     </PageLayout>
   )
 }
diff --git a/src/pages/products.tsx b/src/pages/products.tsx
index 24770ef..89a0a88 100644
--- a/src/pages/products.tsx
+++ b/src/pages/products.tsx
@@ -82,7 +82,7 @@ const Products = ({
       <Network data={networkData} />
       <AppSection data={appData} />
       <Token data={tokenData} />
-      <Related data={initialBlogPosts?.data} reduced={true} />
+      <Related blogData={initialBlogPosts?.data} reduced={true} />
     </PageLayout>
   )
 }