From ff82133a4c6ffc5a28e2c725eb01bab4641aae29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?=
 <78366796+fedealvarezcampos@users.noreply.github.com>
Date: Fri, 20 May 2022 16:06:20 +0200
Subject: [PATCH] Work on Contact page (#70)

* Work on Contact page
---
 public/images/dropdown.svg                    |   3 +
 .../sections/contact/form/form.module.scss    | 154 ++++++++++++++
 .../sections/contact/form/index.tsx           |  63 ++++++
 .../sections/contact/hero/hero.module.scss    | 199 ++++++++++++++++++
 .../sections/contact/hero/index.tsx           |  71 +++++++
 .../sections/products/hero/hero.module.scss   |   4 +
 src/pages/contact.tsx                         |  35 +++
 7 files changed, 529 insertions(+)
 create mode 100644 public/images/dropdown.svg
 create mode 100644 src/components/sections/contact/form/form.module.scss
 create mode 100644 src/components/sections/contact/form/index.tsx
 create mode 100644 src/components/sections/contact/hero/hero.module.scss
 create mode 100644 src/components/sections/contact/hero/index.tsx
 create mode 100644 src/pages/contact.tsx

diff --git a/public/images/dropdown.svg b/public/images/dropdown.svg
new file mode 100644
index 0000000..7121843
--- /dev/null
+++ b/public/images/dropdown.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="15" viewBox="0 0 26 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L13 13L25 1" stroke="#8E8E8E" stroke-width="2"/>
+</svg>
diff --git a/src/components/sections/contact/form/form.module.scss b/src/components/sections/contact/form/form.module.scss
new file mode 100644
index 0000000..dec60f1
--- /dev/null
+++ b/src/components/sections/contact/form/form.module.scss
@@ -0,0 +1,154 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-top: 0;
+    display: flex;
+    place-content: center;
+  }
+
+  position: relative;
+  margin: tovw(135px, 'default', 70px) 0;
+  padding: tovw(104px, 'default', 95px) 0;
+
+  .container {
+    @include respond-to('mobile') {
+      width: 100%;
+      margin: 0 tovw(56px, 'default', 16px);
+      padding: tovw(30px, 'mobile') tovw(56px, 'default', 16px);
+      padding-bottom: tovw(40px, 'mobile');
+      border-radius: tovw(16px, 'default', 16px);
+    }
+
+    width: tovw(1076px, 'default', 400px);
+    padding: tovw(64px, 'default', 50px) tovw(100px, 'default', 50px);
+    background: rgb(0 0 0 / 0.5);
+    border: tovw(1px, 'default', 1px) solid #565656;
+    box-shadow: 0px 2px 100px rgb(0 0 0 / 0.6);
+    border-radius: tovw(24px, 'default', 24px);
+
+    .header {
+      @include respond-to('mobile') {
+        flex-direction: column;
+      }
+
+      display: flex;
+      justify-content: space-between;
+      border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+      padding-bottom: tovw(24px, 'default', 12px);
+
+      > h2 {
+        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+      }
+
+      span {
+        padding-top: tovw(35px, 'default', 14px);
+        color: var(--color-grey-light);
+        font-family: var(--font-dm-mono), sans-serif;
+        font-size: tovw(18px, 'default', 12px);
+      }
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+
+      div:first-child {
+        @include respond-to('mobile') {
+          display: flex;
+          flex-direction: column;
+        }
+
+        display: grid;
+        margin-top: tovw(60px, 'default', 40px);
+        grid-template-columns: repeat(2, 1fr);
+        gap: tovw(40px, 'default', 25px);
+      }
+
+      label {
+        display: flex;
+        flex-direction: column;
+        font-family: var(--font-tt-hoves);
+        font-size: tovw(30px, 'default', 18px);
+
+        input,
+        textarea,
+        select {
+          appearance: none;
+          background-color: unset;
+          font-size: tovw(24px, 'default', 18px);
+          padding-bottom: tovw(26px, 'default', 14px);
+          margin-top: tovw(20px, 'default', 16px);
+          border: unset;
+          border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
+
+          option {
+            background-color: black;
+            opacity: 50%;
+            border: none;
+            color: var(--color-white);
+
+            &:first-child {
+              color: red;
+            }
+          }
+        }
+
+        select {
+          background: url('/images/dropdown.svg') no-repeat 98% 35%;
+          background-size: tovw(20px, 'default', 16px);
+
+          &:invalid {
+            color: var(--color-grey-light);
+          }
+        }
+
+        textarea {
+          resize: none;
+        }
+      }
+
+      > label:nth-child(2) {
+        margin-top: tovw(60px, 'default', 35px);
+      }
+
+      button {
+        @include respond-to('mobile') {
+          width: 100%;
+          font-size: tovw(18px, 'default', 18px);
+        }
+
+        width: fit-content;
+        align-self: center;
+        font-size: tovw(18px, 'default', 14px);
+        margin-top: tovw(50px, 'default', 35px);
+      }
+    }
+
+    .gradient {
+      @include respond-to('mobile') {
+        bottom: tovw(1px, 'mobile', 90px);
+        height: tovw(230px, 'mobile', 440px);
+      }
+
+      position: absolute;
+      right: 0;
+      bottom: tovw(270px, 'default', 240px);
+      left: 0;
+      opacity: 0.4;
+      margin-left: 0;
+      background: linear-gradient(
+        180deg,
+        rgb(229 229 229 / 0) 0%,
+        rgb(241 241 241 / 0.4) 48.91%,
+        rgb(241 241 241 / 0) 89.23%
+      );
+      width: 100%;
+      height: tovw(500px, 'default', 180px);
+      content: '';
+      pointer-events: none;
+      user-select: none;
+      z-index: -1;
+    }
+  }
+}
diff --git a/src/components/sections/contact/form/index.tsx b/src/components/sections/contact/form/index.tsx
new file mode 100644
index 0000000..bb9dbef
--- /dev/null
+++ b/src/components/sections/contact/form/index.tsx
@@ -0,0 +1,63 @@
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import { Button } from '~/components/primitives/button'
+import Heading from '~/components/primitives/heading'
+
+import s from './form.module.scss'
+
+const Form = () => {
+  return (
+    <Section className={s['section']}>
+      <Container className={s['container']}>
+        <div className={s['header']}>
+          <Heading as="h2" variant="md">
+            Contact Form
+          </Heading>
+          <span>ALL FIELDS ARE REQUIRED</span>
+        </div>
+        <form action="/">
+          <div>
+            <label htmlFor="partnership">
+              Type of inquiry
+              <select name="partnership" id="partnership" required>
+                <option value="" hidden>
+                  Partnership*
+                </option>
+                <option value="Validator/Member">Validator/Member</option>
+                <option value="Investor">Investor</option>
+                <option value="Press">Press</option>
+                <option value="Marketing">Marketing</option>
+              </select>
+            </label>
+            <label htmlFor="email">
+              Email
+              <input
+                placeholder="email@email.com*"
+                type="email"
+                name="email"
+                id="email"
+                required
+              />
+            </label>
+          </div>
+          <label htmlFor="message">
+            Message
+            <textarea
+              placeholder="Write a message or a comment*"
+              name="message"
+              id="message"
+              rows={5}
+              required
+            ></textarea>
+          </label>
+          <Button size="medium" variant="primary">
+            Submit message
+          </Button>
+        </form>
+        <div className={s['gradient']} />
+      </Container>
+    </Section>
+  )
+}
+
+export default Form
diff --git a/src/components/sections/contact/hero/hero.module.scss b/src/components/sections/contact/hero/hero.module.scss
new file mode 100644
index 0000000..8782462
--- /dev/null
+++ b/src/components/sections/contact/hero/hero.module.scss
@@ -0,0 +1,199 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-bottom: tovw(88px, 'mobile');
+    padding: 0;
+    padding-bottom: tovw(10px, 'mobile');
+    width: 100vw;
+  }
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: tovw(100px, 'default', 50px) 0;
+  max-width: 100%;
+  min-height: calc(var(--vh) * 100);
+
+  .container {
+    @include respond-to('mobile') {
+      padding: 0 tovw(56px, 'default', 16px);
+    }
+
+    display: flex;
+    justify-content: center;
+  }
+
+  .video_container {
+    @include respond-to('mobile') {
+      margin-top: unset;
+    }
+
+    display: flex;
+    align-self: center;
+    position: relative;
+    margin-top: tovw(-165px, 'default');
+    padding-top: tovw(30px, 'default', 20px);
+    width: 82%;
+    mix-blend-mode: lighten;
+
+    video {
+      @include respond-to('mobile') {
+        display: none;
+      }
+
+      width: 100%;
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 0) 60%,
+        rgb(3 3 3 / 1) 75%,
+        rgb(3 3 3 / 1) 100%
+      );
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  .hero__mobile {
+    @include respond-to('mobile') {
+      display: flex;
+      margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
+        tovw(16px, 'mobile', 20px);
+      width: 200%;
+      mix-blend-mode: screen;
+      place-self: center;
+      mask-image: linear-gradient(
+        0deg,
+        rgb(255 255 255 / 0) 0%,
+        rgb(0 0 0) 25%
+      );
+    }
+
+    display: none;
+  }
+
+  .body {
+    @include respond-to('mobile') {
+      width: 100%;
+      align-items: flex-start;
+      text-align: start;
+    }
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: tovw(16px, 'default', 10px);
+    width: tovw(800px, 'default');
+    gap: tovw(50px, 'default', 40px);
+
+    div {
+      &:first-child {
+        @include respond-to('mobile') {
+          width: 100%;
+          display: flex;
+          align-items: flex-end;
+          justify-content: space-between;
+        }
+
+        .arrow {
+          @include respond-to('mobile') {
+            display: unset;
+            position: relative;
+            align-self: flex-end;
+            padding-bottom: tovw(10px, 'mobile', 10px);
+            width: tovw(18px, 'mobile', 18px);
+          }
+
+          display: none;
+        }
+      }
+
+      &:nth-child(2) {
+        @include respond-to('mobile') {
+          display: flex;
+        }
+      }
+    }
+
+    h1 {
+      @include respond-to('mobile') {
+        font-size: tovw(50px, 'mobile');
+      }
+
+      margin: 0;
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+    }
+
+    h2 {
+      @include respond-to('mobile') {
+        font-size: tovw(30px, 'mobile');
+        padding-top: unset;
+      }
+
+      line-height: 105%;
+      padding-top: tovw(48px, 'default', 38px);
+      text-transform: capitalize;
+    }
+
+    a {
+      &:nth-child(3) {
+        @include respond-to('mobile') {
+          display: none;
+        }
+
+        padding: tovw(17px, 'default', 17px) 0;
+        width: tovw(96px, 'default', 96px);
+
+        svg {
+          width: tovw(35px, 'default', 35px);
+        }
+      }
+
+      &:last-child {
+        @include respond-to('mobile') {
+          display: block;
+        }
+
+        display: none;
+      }
+    }
+
+    .line {
+      @include respond-to('mobile') {
+        margin-right: tovw(18px, 'mobile');
+        height: tovw(58px, 'mobile');
+      }
+
+      height: tovw(80px, 'default', 60px);
+      transform: scaleY(1.5) scaleX(2.5);
+    }
+  }
+
+  .gradient {
+    @include respond-to('mobile') {
+      height: 70%;
+    }
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    mix-blend-mode: screen;
+    background: linear-gradient(
+      180deg,
+      rgb(0 0 244 / 0.9) 1.63%,
+      rgb(0 0 244 / 0) 99.89%
+    );
+    width: 100%;
+    height: tovw(740px, 'default', 740px);
+  }
+}
diff --git a/src/components/sections/contact/hero/index.tsx b/src/components/sections/contact/hero/index.tsx
new file mode 100644
index 0000000..98616ae
--- /dev/null
+++ b/src/components/sections/contact/hero/index.tsx
@@ -0,0 +1,71 @@
+import { useRef } from 'react'
+
+import { Arrow } from '~/components/icons/arrow'
+import Line from '~/components/icons/line'
+import { Discord } from '~/components/icons/socials'
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import { ButtonLink } from '~/components/primitives/button'
+import Heading from '~/components/primitives/heading'
+import Link from '~/components/primitives/link'
+
+import s from './hero.module.scss'
+
+const Hero = () => {
+  const heroVideoRef = useRef<HTMLVideoElement>(null)
+
+  return (
+    <Section className={s['section']} disableFadeIn>
+      <div className={s.gradient} />
+      <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"
+        alt="hero"
+        src="/images/products/products.jpg"
+      />
+      <Container className={s['container']}>
+        <div className={s.body}>
+          <div>
+            <Heading as="h1" variant="xl">
+              Get in touch
+            </Heading>
+            <Arrow className={s['arrow']} />
+          </div>
+          <div>
+            <Line className={s['line']} height={144} />
+            <Heading as="h2" variant="lg">
+              For general or technical inquiries
+            </Heading>
+          </div>
+          <ButtonLink
+            variant="primary"
+            size="large"
+            className={s['button']}
+            href="https://laconic.community/"
+          >
+            <Discord />
+          </ButtonLink>
+          <Link variant="default" href="https://laconic.community/">
+            contact us
+          </Link>
+        </div>
+      </Container>
+    </Section>
+  )
+}
+
+export default Hero
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index e0defa7..606b84d 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -21,6 +21,10 @@
   }
 
   .video_container {
+    @include respond-to('mobile') {
+      margin-top: unset;
+    }
+
     align-self: center;
     position: relative;
     margin-top: tovw(-165px, 'default');
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
new file mode 100644
index 0000000..570eaa9
--- /dev/null
+++ b/src/pages/contact.tsx
@@ -0,0 +1,35 @@
+import { InferGetStaticPropsType } from 'next'
+
+import { Meta } from '~/components/common/meta'
+import { PageLayout } from '~/components/layout/page'
+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 { request } from '../lib/datocms'
+
+export const getStaticProps = async () => {
+  const [socialsData] = await Promise.all([request(CommunitySocials)])
+
+  return {
+    props: {
+      socialsData: socialsData?.communityPage
+    },
+    revalidate: 60
+  }
+}
+const Contact = ({
+  socialsData
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <PageLayout>
+      <Meta />
+      <Hero />
+      <Form />
+      <Socials data={socialsData} />
+    </PageLayout>
+  )
+}
+
+export default Contact