From 616f6801ce083e512ed1c64bae4042749a0428d9 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 15:31:57 +0200
Subject: [PATCH] Work on Partners (#69)

---
 .../partners/contact/contact.module.scss      | 216 ++++++++++++++++++
 .../sections/partners/contact/index.tsx       | 117 ++++++++++
 .../sections/partners/hero/hero.module.scss   | 195 ++++++++++++++++
 .../sections/partners/hero/index.tsx          |  85 +++++++
 .../sections/partners/opportunities/index.tsx | 198 ++++++++++++++++
 .../opportunities/opportunities.module.scss   | 126 ++++++++++
 src/pages/partners.tsx                        |  70 ++++++
 7 files changed, 1007 insertions(+)
 create mode 100644 src/components/sections/partners/contact/contact.module.scss
 create mode 100644 src/components/sections/partners/contact/index.tsx
 create mode 100644 src/components/sections/partners/hero/hero.module.scss
 create mode 100644 src/components/sections/partners/hero/index.tsx
 create mode 100644 src/components/sections/partners/opportunities/index.tsx
 create mode 100644 src/components/sections/partners/opportunities/opportunities.module.scss
 create mode 100644 src/pages/partners.tsx

diff --git a/src/components/sections/partners/contact/contact.module.scss b/src/components/sections/partners/contact/contact.module.scss
new file mode 100644
index 0000000..9f6708d
--- /dev/null
+++ b/src/components/sections/partners/contact/contact.module.scss
@@ -0,0 +1,216 @@
+@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%;
+      padding: 0 tovw(56px, 'default', 16px);
+    }
+
+    width: tovw(1076px, 'default', 400px);
+
+    .heading {
+      @include respond-to('mobile') {
+        text-align: start;
+        align-items: flex-start;
+        margin-bottom: tovw(40px, 'mobile');
+      }
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      margin-bottom: tovw(40px, 'default', 30px);
+
+      h2 {
+        @include respond-to('mobile') {
+          width: 100%;
+          max-width: tovw(500px, 'default', 500px);
+        }
+
+        width: tovw(680px, 'default', 400px);
+      }
+
+      p {
+        @include respond-to('mobile') {
+          width: 100%;
+          padding-top: tovw(20px, 'mobile');
+          max-width: tovw(500px, 'default', 500px);
+        }
+
+        width: tovw(880px, 'default', 460px);
+        font-size: tovw(30px, 'default', 16px);
+        line-height: 1.3;
+      }
+
+      .line {
+        @include respond-to('mobile') {
+          display: none;
+        }
+
+        margin-top: tovw(5px, 'default', 5px);
+        height: tovw(80px, 'default', 80px);
+        transform: scaleX(1.5);
+      }
+    }
+
+    .form__container {
+      @include respond-to('mobile') {
+        padding: tovw(56px, 'default', 32px) tovw(56px, 'default', 16px);
+        border-radius: tovw(16px, 'default', 16px);
+      }
+
+      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;
+        align-items: flex-start;
+      }
+
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+      padding-bottom: tovw(24px, 'default', 12px);
+
+      > h2 {
+        @include respond-to('mobile') {
+          width: 100%;
+          line-height: 1.15;
+          font-size: tovw(30px, 'default', 25px);
+        }
+
+        width: tovw(540px, 'default', 300px);
+        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);
+        text-align: end;
+      }
+    }
+
+    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;
+        justify-content: space-between;
+        font-family: var(--font-tt-hoves);
+        font-size: tovw(30px, 'default', 18px);
+
+        input,
+        textarea,
+        select {
+          width: 100%;
+          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);
+        opacity: 0.45;
+      }
+
+      position: absolute;
+      right: 0;
+      top: 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(1200px, 'default', 880px);
+      content: '';
+      pointer-events: none;
+      user-select: none;
+      z-index: -1;
+    }
+  }
+}
diff --git a/src/components/sections/partners/contact/index.tsx b/src/components/sections/partners/contact/index.tsx
new file mode 100644
index 0000000..a2e891f
--- /dev/null
+++ b/src/components/sections/partners/contact/index.tsx
@@ -0,0 +1,117 @@
+import Line from '~/components/icons/line'
+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 './contact.module.scss'
+
+const Contact = () => {
+  return (
+    <Section className={s['section']}>
+      <Container className={s['container']}>
+        <div className={s.heading}>
+          <Heading variant="sm" as="h2">
+            Are you interested in participating in Laconic Network’s testnet?
+          </Heading>
+          <p>
+            It may be easier than you think, with multiple opportunities for
+            people with varying levels of technical expertise, from running
+            large data pipelines to simply leaving your browser tab open.
+          </p>
+          <Line className={s.line} height={144} />
+        </div>
+        <div className={s.form__container}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="sm">
+              Tell us a bit about yourself, and join for early access.
+            </Heading>
+            <span>ALL FIELDS ARE REQUIRED</span>
+          </div>
+          <form action="/">
+            <div>
+              <label htmlFor="name">
+                Name
+                <input
+                  placeholder="Lorem*"
+                  type="text"
+                  name="name"
+                  id="name"
+                  required
+                />
+              </label>
+              <label htmlFor="email">
+                Email
+                <input
+                  placeholder="email@email.com*"
+                  type="email"
+                  name="email"
+                  id="email"
+                  required
+                />
+              </label>
+              <label htmlFor="role">
+                Role
+                <input
+                  placeholder="Lorem*"
+                  type="text"
+                  name="role"
+                  id="role"
+                  required
+                />
+              </label>
+              <label htmlFor="company">
+                Company
+                <input
+                  placeholder="Lorem*"
+                  type="text"
+                  name="company"
+                  id="company"
+                  required
+                />
+              </label>
+              <label htmlFor="jurisdiction">
+                What legal jurisdiction is your entity based in?
+                <input
+                  placeholder="Lorem*"
+                  type="text"
+                  name="jurisdiction"
+                  id="jurisdiction"
+                  required
+                />
+              </label>
+              <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>
+            </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>
+        <div className={s['gradient']} />
+      </Container>
+    </Section>
+  )
+}
+
+export default Contact
diff --git a/src/components/sections/partners/hero/hero.module.scss b/src/components/sections/partners/hero/hero.module.scss
new file mode 100644
index 0000000..17efee6
--- /dev/null
+++ b/src/components/sections/partners/hero/hero.module.scss
@@ -0,0 +1,195 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-bottom: tovw(88px, 'mobile');
+    padding: 0;
+    width: 100vw;
+    justify-content: flex-start;
+  }
+
+  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);
+    }
+  }
+
+  .video_container {
+    align-self: center;
+    position: relative;
+    margin-top: tovw(-165px, 'default');
+    margin-bottom: tovw(-140px, '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') {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    display: flex;
+    justify-content: space-between;
+    margin-top: tovw(16px, 'default', 10px);
+
+    div:first-child {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    h1 {
+      @include respond-to('mobile') {
+        width: 100%;
+        font-size: tovw(50px, 'mobile');
+      }
+
+      margin: 0;
+      font-size: tovw(100px, 'default', 70px);
+      width: tovw(600px, 'default', 300px);
+      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+    }
+
+    .text__container {
+      @include respond-to('mobile') {
+        width: 100%;
+        max-width: tovw(500px, 'default', 500px);
+        margin-top: tovw(25px, 'mobile');
+      }
+
+      display: flex;
+      flex-direction: column;
+      width: tovw(645px, 'default', 300px);
+
+      p {
+        margin: tovw(25px, 'default', 10px) 0;
+        font-size: tovw(30px, 'default', 18px);
+      }
+
+      ol {
+        @include respond-to('mobile') {
+          width: fit-content;
+          gap: tovw(30px, 'default', 30px) tovw(30px, 'default', 10px);
+        }
+
+        display: grid;
+        width: 80%;
+        margin-top: tovw(55px, 'default', 40px);
+        padding: 0;
+        list-style: none;
+        list-style-position: outside;
+        font-family: var(--font-tt-hoves);
+        font-size: tovw(24px, 'default', 15px);
+        gap: tovw(68px, 'default', 40px) tovw(35px, 'default', 15px);
+        grid-template-columns: repeat(2, 1fr);
+
+        li {
+          @include respond-to('mobile') {
+            gap: tovw(10px, 'default', 10px);
+          }
+
+          display: flex;
+          position: relative;
+          counter-increment: custom;
+          gap: tovw(24px, 'default', 18px);
+
+          &:first-child {
+            counter-reset: custom;
+          }
+
+          &::before {
+            padding-top: tovw(3px, 'default');
+            font-family: var(--font-dm-mono), sans-serif;
+            font-size: tovw(10px, 'default', 10px);
+            content: '0' counter(custom) ' ';
+          }
+
+          a {
+            font-size: tovw(18px, 'default', 12px);
+          }
+        }
+      }
+    }
+
+    .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;
+    }
+  }
+
+  .gradient {
+    @include respond-to('mobile') {
+      height: 80%;
+    }
+
+    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/partners/hero/index.tsx b/src/components/sections/partners/hero/index.tsx
new file mode 100644
index 0000000..c26c503
--- /dev/null
+++ b/src/components/sections/partners/hero/index.tsx
@@ -0,0 +1,85 @@
+import { useRef } from 'react'
+
+import { Arrow } from '~/components/icons/arrow'
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+import Link from '~/components/primitives/link'
+
+import s from './hero.module.scss'
+
+// interface Props {
+//   data: {
+//     heroHeading: string
+//     heroLine: string
+//   }
+// }
+
+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">
+              Join Us to Build Web3
+            </Heading>
+            <Arrow className={s['arrow']} />
+          </div>
+          <div className={s.text__container}>
+            <p>
+              Laconic is ushering in a new era of internet-scale Web3 apps.
+              We’re solving the hardest problems in Web3 by expanding access to
+              verifiable data, and building a global incentivized peer-to-peer
+              data marketplace that anyone can participate in.
+            </p>
+            <p>
+              Interested in participating in the network? We have multiple
+              opportunities for people and organizations around the world with
+              varying levels of technical expertise to get involved:
+            </p>
+            <ol>
+              <li>
+                <Link href="https://google.com">Validators</Link>
+              </li>
+              <li>
+                <Link href="https://google.com">Service providers</Link>
+              </li>
+              <li>
+                <Link href="https://google.com">Developers</Link>
+              </li>
+              <li>
+                <Link href="https://google.com">Investors</Link>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </Container>
+    </Section>
+  )
+}
+
+export default Hero
diff --git a/src/components/sections/partners/opportunities/index.tsx b/src/components/sections/partners/opportunities/index.tsx
new file mode 100644
index 0000000..47fe082
--- /dev/null
+++ b/src/components/sections/partners/opportunities/index.tsx
@@ -0,0 +1,198 @@
+import { Arrow } from '~/components/icons/arrow'
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+import Link from '~/components/primitives/link'
+
+import s from './opportunities.module.scss'
+
+const Opportunities = () => {
+  return (
+    <Section className={s['section']}>
+      <Container className={s['container']}>
+        <div className={s.block}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="lg">
+              Validators
+            </Heading>
+          </div>
+          <div className={s.text__container}>
+            <Arrow className={s.arrow} />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          </div>
+          <ul>
+            <li>
+              <Link href="https://google.com">DUIS AUTE</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Excepteur sint</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Sunt in culpa</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Qui oficia</Link>
+            </li>
+          </ul>
+        </div>
+        <div className={s.block}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="lg">
+              Service Providers
+            </Heading>
+          </div>
+          <div className={s.text__container}>
+            <Arrow className={s.arrow} />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          </div>
+          <ul>
+            <li>
+              <Link href="https://google.com">DUIS AUTE</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Excepteur sint</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Sunt in culpa</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Qui oficia</Link>
+            </li>
+          </ul>
+        </div>
+        <div className={s.block}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="lg">
+              Developers
+            </Heading>
+          </div>
+          <div className={s.text__container}>
+            <Arrow className={s.arrow} />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          </div>
+          <ul>
+            <li>
+              <Link href="https://google.com">DUIS AUTE</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Excepteur sint</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Sunt in culpa</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Qui oficia</Link>
+            </li>
+          </ul>
+        </div>
+        <div className={s.block}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="lg">
+              Investors
+            </Heading>
+          </div>
+          <div className={s.text__container}>
+            <Arrow className={s.arrow} />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          </div>
+          <ul>
+            <li>
+              <Link href="https://google.com">DUIS AUTE</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Excepteur sint</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Sunt in culpa</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Qui oficia</Link>
+            </li>
+          </ul>
+        </div>
+        <div className={s.block}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="lg">
+              Incentivized Testnet
+            </Heading>
+          </div>
+          <div className={s.text__container}>
+            <Arrow className={s.arrow} />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+              cupidatat non proident, sunt in culpa qui officia deserunt mollit
+              anim id est laborum.
+            </p>
+          </div>
+          <ul>
+            <li>
+              <Link href="https://google.com">DUIS AUTE</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Excepteur sint</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Sunt in culpa</Link>
+            </li>
+            <li>
+              <Link href="https://google.com">Qui oficia</Link>
+            </li>
+          </ul>
+        </div>
+      </Container>
+    </Section>
+  )
+}
+
+export default Opportunities
diff --git a/src/components/sections/partners/opportunities/opportunities.module.scss b/src/components/sections/partners/opportunities/opportunities.module.scss
new file mode 100644
index 0000000..2bb08d8
--- /dev/null
+++ b/src/components/sections/partners/opportunities/opportunities.module.scss
@@ -0,0 +1,126 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-top: 0;
+    padding-bottom: tovw(20px, 'mobile');
+  }
+
+  position: relative;
+  margin: tovw(105px, 'default', 70px) 0;
+  padding: tovw(104px, 'default', 95px) 0;
+
+  .container {
+    @include respond-to('mobile') {
+      padding: 0 tovw(56px, 'default', 16px);
+      width: 100%;
+    }
+
+    position: relative;
+
+    .block {
+      padding-top: tovw(86px, 'default', 30px);
+      border-top: tovw(1px, 'default', 1px) solid var(--color-grey-light);
+
+      &:not(:first-child) {
+        margin-top: tovw(120px, 'default', 60px);
+      }
+
+      &:last-child {
+        @include respond-to('mobile') {
+          border-bottom: unset;
+          padding-bottom: unset;
+        }
+
+        padding-bottom: tovw(120px, 'default', 60px);
+        border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
+      }
+
+      .header {
+        @include respond-to('mobile') {
+          align-items: flex-end;
+        }
+
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: tovw(76px, 'default', 35px);
+
+        > 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);
+        }
+      }
+
+      .text__container {
+        @include respond-to('mobile') {
+          gap: tovw(30px, 'default', 30px);
+          flex-direction: column;
+        }
+
+        display: flex;
+        gap: tovw(80px, 'default', 30px);
+
+        p {
+          @include respond-to('mobile') {
+            width: 100%;
+            max-width: tovw(500px, 'default', 500px);
+            line-height: 1.6;
+            font-size: tovw(15px, 'default', 15px);
+          }
+
+          margin: 0;
+          width: tovw(520px, 'default', 300px);
+          font-size: tovw(24px, 'default', 16px);
+        }
+
+        .arrow {
+          @include respond-to('mobile') {
+            display: none;
+          }
+
+          flex-shrink: 0;
+          width: tovw(23px, 'default', 14px);
+          height: fit-content;
+        }
+      }
+
+      ul {
+        @include respond-to('mobile') {
+          padding: 0;
+          flex-direction: column;
+          gap: tovw(20px, 'mobile');
+        }
+
+        display: flex;
+        list-style: none;
+        padding-left: tovw(104px, 'default', 52px);
+        margin: 0;
+        margin-top: tovw(90px, 'default', 30px);
+
+        li {
+          a {
+            @include respond-to('mobile') {
+              font-size: tovw(18px, 'default', 18px);
+            }
+
+            font-size: tovw(18px, 'default', 12px);
+          }
+
+          &:not(:first-child) {
+            @include respond-to('mobile') {
+              margin: 0;
+            }
+
+            margin-left: tovw(35px, 'default', 35px);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/partners.tsx b/src/pages/partners.tsx
new file mode 100644
index 0000000..a9558b8
--- /dev/null
+++ b/src/pages/partners.tsx
@@ -0,0 +1,70 @@
+import {
+  getBlogPosts as serverGetBlogPosts,
+  getBlogPostsCategories as serverGetBlogPostsCategories
+} from 'lib/blog'
+import { InferGetStaticPropsType } from 'next'
+
+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'
+
+import { request } from '../lib/datocms'
+
+export const getStaticProps = async () => {
+  const [allBlogPosts, categories] = await Promise.all([
+    serverGetBlogPosts({ page: 1 }),
+    serverGetBlogPostsCategories()
+  ])
+
+  const heroBlogPost = allBlogPosts.data[0]
+
+  const [othersData, testimonialsData] = await Promise.all([
+    request(HomeOthers),
+
+    request(Testimonials)
+  ])
+
+  return {
+    props: {
+      othersData: othersData?.homePage,
+      testimonialsData: testimonialsData?.allTestimonials,
+      initialBlogPosts: {
+        pagination: allBlogPosts.pagination,
+        data: allBlogPosts.data.slice(0, 3)
+      },
+      categories,
+      page:
+        {
+          heroBlogPost
+        } ?? null
+    },
+    revalidate: 60
+  }
+}
+
+const Careers = ({
+  othersData,
+  testimonialsData
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <PageLayout>
+      <Meta
+      // preload={[
+      //   { href: '/videos/banner-products.mp4', as: 'fetch' },
+      //   { href: '/videos/banner-products.webm', as: 'fetch' }
+      // ]}
+      />
+      <Hero />
+      <Opportunities />
+      <Contact />
+      <WhatOthersSay data={othersData} testimonialsData={testimonialsData} />
+    </PageLayout>
+  )
+}
+
+export default Careers