From 02bb3c9de6307ae3d8eba00f0db59a2c27295625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Sun, 22 May 2022 16:33:44 +0200
Subject: [PATCH] Work on CMS

---
 .../sections/community/socials/index.tsx      |  6 ++--
 .../sections/contact/form/index.tsx           | 34 +++++++++++++------
 .../sections/contact/hero/index.tsx           | 21 ++++++++----
 src/lib/cms/queries/community.js              |  1 +
 src/lib/cms/queries/contact.js                | 30 ++++++++++++++++
 src/pages/careers.tsx                         |  7 +---
 src/pages/community.tsx                       |  8 ++---
 src/pages/contact.tsx                         | 17 +++++++---
 src/pages/index.tsx                           |  4 ++-
 src/pages/products.tsx                        |  7 +---
 10 files changed, 96 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/cms/queries/contact.js

diff --git a/src/components/sections/community/socials/index.tsx b/src/components/sections/community/socials/index.tsx
index 5684f74..e5679b8 100644
--- a/src/components/sections/community/socials/index.tsx
+++ b/src/components/sections/community/socials/index.tsx
@@ -18,8 +18,10 @@ import Heading from '~/components/primitives/heading'
 import s from './socials.module.scss'
 
 interface Props {
+  alternative?: boolean
   data: {
     socialsHeading: string
+    socialsHeadingAlt: string
     socialsLine: string
     socialsImage: {
       url: string
@@ -35,7 +37,7 @@ interface Props {
   }
 }
 
-const Socials = ({ data }: Props) => {
+const Socials = ({ data, alternative }: Props) => {
   return (
     <Section className={s['section']}>
       <Container className={s['container']}>
@@ -48,7 +50,7 @@ const Socials = ({ data }: Props) => {
         <div>
           <div className={s['header']}>
             <Heading as="h2" variant="xl" centered={false}>
-              {data?.socialsHeading}
+              {alternative ? data?.socialsHeadingAlt : data?.socialsHeading}
             </Heading>
           </div>
           <Line className={s['line']} height={144} />
diff --git a/src/components/sections/contact/form/index.tsx b/src/components/sections/contact/form/index.tsx
index bb9dbef..aa8b5c8 100644
--- a/src/components/sections/contact/form/index.tsx
+++ b/src/components/sections/contact/form/index.tsx
@@ -5,23 +5,37 @@ import Heading from '~/components/primitives/heading'
 
 import s from './form.module.scss'
 
-const Form = () => {
+interface Props {
+  data: {
+    formHeading: string
+    formWarning: string
+    formLabelPartner: string
+    formPlaceholderPartner: string
+    formLabelEmail: string
+    formPlaceholderEmail: string
+    formLabelMsg: string
+    formPlaceholderMsg: string
+    formLabelButton: string
+  }
+}
+
+const Form = ({ data }: Props) => {
   return (
     <Section className={s['section']}>
       <Container className={s['container']}>
         <div className={s['header']}>
           <Heading as="h2" variant="md">
-            Contact Form
+            {data?.formHeading}
           </Heading>
-          <span>ALL FIELDS ARE REQUIRED</span>
+          <span>{data?.formWarning}</span>
         </div>
         <form action="/">
           <div>
             <label htmlFor="partnership">
-              Type of inquiry
+              {data?.formLabelPartner}
               <select name="partnership" id="partnership" required>
                 <option value="" hidden>
-                  Partnership*
+                  {data?.formPlaceholderPartner}
                 </option>
                 <option value="Validator/Member">Validator/Member</option>
                 <option value="Investor">Investor</option>
@@ -30,9 +44,9 @@ const Form = () => {
               </select>
             </label>
             <label htmlFor="email">
-              Email
+              {data?.formLabelEmail}
               <input
-                placeholder="email@email.com*"
+                placeholder={data?.formPlaceholderEmail}
                 type="email"
                 name="email"
                 id="email"
@@ -41,9 +55,9 @@ const Form = () => {
             </label>
           </div>
           <label htmlFor="message">
-            Message
+            {data?.formLabelMsg}
             <textarea
-              placeholder="Write a message or a comment*"
+              placeholder={data?.formPlaceholderMsg}
               name="message"
               id="message"
               rows={5}
@@ -51,7 +65,7 @@ const Form = () => {
             ></textarea>
           </label>
           <Button size="medium" variant="primary">
-            Submit message
+            {data?.formLabelButton}
           </Button>
         </form>
         <div className={s['gradient']} />
diff --git a/src/components/sections/contact/hero/index.tsx b/src/components/sections/contact/hero/index.tsx
index 98616ae..aabb916 100644
--- a/src/components/sections/contact/hero/index.tsx
+++ b/src/components/sections/contact/hero/index.tsx
@@ -11,7 +11,16 @@ import Link from '~/components/primitives/link'
 
 import s from './hero.module.scss'
 
-const Hero = () => {
+interface Props {
+  data: {
+    heroHeading: string
+    heroLine: string
+    heroLink: string
+    heroMobileLinkLabel: string
+  }
+}
+
+const Hero = ({ data }: Props) => {
   const heroVideoRef = useRef<HTMLVideoElement>(null)
 
   return (
@@ -41,26 +50,26 @@ const Hero = () => {
         <div className={s.body}>
           <div>
             <Heading as="h1" variant="xl">
-              Get in touch
+              {data?.heroHeading}
             </Heading>
             <Arrow className={s['arrow']} />
           </div>
           <div>
             <Line className={s['line']} height={144} />
             <Heading as="h2" variant="lg">
-              For general or technical inquiries
+              {data?.heroLine}
             </Heading>
           </div>
           <ButtonLink
             variant="primary"
             size="large"
             className={s['button']}
-            href="https://laconic.community/"
+            href={data?.heroLink}
           >
             <Discord />
           </ButtonLink>
-          <Link variant="default" href="https://laconic.community/">
-            contact us
+          <Link variant="default" href={data?.heroLink}>
+            {data?.heroMobileLinkLabel}
           </Link>
         </div>
       </Container>
diff --git a/src/lib/cms/queries/community.js b/src/lib/cms/queries/community.js
index 4df4add..c23645b 100644
--- a/src/lib/cms/queries/community.js
+++ b/src/lib/cms/queries/community.js
@@ -46,6 +46,7 @@ const CommunitySocials = {
         {
             communityPage {
                 socialsHeading
+                socialsHeadingAlt
                 socialsLine
                 socialsImage {
                     url
diff --git a/src/lib/cms/queries/contact.js b/src/lib/cms/queries/contact.js
new file mode 100644
index 0000000..719e058
--- /dev/null
+++ b/src/lib/cms/queries/contact.js
@@ -0,0 +1,30 @@
+const ContactHero = {
+  query: `
+            {
+                contactPage {
+                    heroHeading
+                    heroLine
+                    heroLink
+                    heroMobileLinkLabel
+                }
+            }`
+}
+
+const ContactForm = {
+  query: `
+            {
+                contactPage {
+                    formHeading
+                    formWarning
+                    formLabelEmail
+                    formPlaceholderEmail
+                    formLabelMsg
+                    formPlaceholderMsg
+                    formLabelPartner
+                    formPlaceholderPartner
+                    formLabelButton
+                }
+            }`
+}
+
+export { ContactForm, ContactHero }
diff --git a/src/pages/careers.tsx b/src/pages/careers.tsx
index 346c875..a631063 100644
--- a/src/pages/careers.tsx
+++ b/src/pages/careers.tsx
@@ -69,12 +69,7 @@ const Careers = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
-      <Meta
-        preload={[
-          { href: '/videos/banner-products.mp4', as: 'fetch' },
-          { href: '/videos/banner-products.webm', as: 'fetch' }
-        ]}
-      />
+      <Meta />
       <Hero data={heroData} />
       <Values data={valuesData} />
       <WhyJoin data={whyData} />
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 6e5b548..848b3c6 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -43,10 +43,10 @@ const Community = ({
   return (
     <PageLayout>
       <Meta
-        preload={[
-          { href: '/videos/banner-community.mp4', as: 'fetch' },
-          { href: '/videos/banner-community.webm', as: 'fetch' }
-        ]}
+      // preload={[
+      //   { href: '/videos/banner-community.mp4', as: 'fetch' },
+      //   { href: '/videos/banner-community.webm', as: 'fetch' }
+      // ]}
       />
       <Hero data={heroData} />
       <Events eventsData={eventsData} data={eventsSectionData} />
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 570eaa9..cda3f0e 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -6,28 +6,37 @@ import Socials from '~/components/sections/community/socials'
 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 { request } from '../lib/datocms'
 
 export const getStaticProps = async () => {
-  const [socialsData] = await Promise.all([request(CommunitySocials)])
+  const [heroData, formData, socialsData] = await Promise.all([
+    request(ContactHero),
+    request(ContactForm),
+    request(CommunitySocials)
+  ])
 
   return {
     props: {
+      heroData: heroData?.contactPage,
+      formData: formData?.contactPage,
       socialsData: socialsData?.communityPage
     },
     revalidate: 60
   }
 }
 const Contact = ({
+  heroData,
+  formData,
   socialsData
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Meta />
-      <Hero />
-      <Form />
-      <Socials data={socialsData} />
+      <Hero data={heroData} />
+      <Form data={formData} />
+      <Socials data={socialsData} alternative={true} />
     </PageLayout>
   )
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e2a3b0f..61b9ad5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -68,7 +68,9 @@ const HomePage = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
-      <Meta preload={[{ href: '/videos/hero-grid.mp4', as: 'fetch' }]} />
+      <Meta
+      // preload={[{ href: '/videos/hero-grid.mp4', as: 'fetch' }]}
+      />
       <Hero data={heroData} />
       <Benefits data={benefitsData} />
       <LatestNews blogData={initialBlogPosts?.data} data={latestData} />
diff --git a/src/pages/products.tsx b/src/pages/products.tsx
index 82c49cf..a3435f5 100644
--- a/src/pages/products.tsx
+++ b/src/pages/products.tsx
@@ -75,12 +75,7 @@ const Products = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
-      <Meta
-        preload={[
-          { href: '/videos/banner-products.mp4', as: 'fetch' },
-          { href: '/videos/banner-products.webm', as: 'fetch' }
-        ]}
-      />
+      <Meta />
       <Hero data={heroData} />
       <Watchers data={watchersData} />
       <Stack data={stackData} />