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 ( +
+ +
+ + Are you interested in participating in Laconic Network’s testnet? + +

+ 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. +

+ +
+
+
+ + Tell us a bit about yourself, and join for early access. + + ALL FIELDS ARE REQUIRED +
+
+
+ + + + + + +
+ + +
+
+
+ +
+ ) +} + +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(null) + + return ( +
+
+
+ +
+ hero + +
+
+ + Join Us to Build Web3 + + +
+
+

+ 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. +

+

+ 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: +

+
    +
  1. + Validators +
  2. +
  3. + Service providers +
  4. +
  5. + Developers +
  6. +
  7. + Investors +
  8. +
+
+
+
+
+ ) +} + +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 ( +
+ +
+
+ + Validators + +
+
+ +

+ 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. +

+

+ 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. +

+
+
    +
  • + DUIS AUTE +
  • +
  • + Excepteur sint +
  • +
  • + Sunt in culpa +
  • +
  • + Qui oficia +
  • +
+
+
+
+ + Service Providers + +
+
+ +

+ 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. +

+

+ 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. +

+
+
    +
  • + DUIS AUTE +
  • +
  • + Excepteur sint +
  • +
  • + Sunt in culpa +
  • +
  • + Qui oficia +
  • +
+
+
+
+ + Developers + +
+
+ +

+ 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. +

+

+ 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. +

+
+
    +
  • + DUIS AUTE +
  • +
  • + Excepteur sint +
  • +
  • + Sunt in culpa +
  • +
  • + Qui oficia +
  • +
+
+
+
+ + Investors + +
+
+ +

+ 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. +

+

+ 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. +

+
+
    +
  • + DUIS AUTE +
  • +
  • + Excepteur sint +
  • +
  • + Sunt in culpa +
  • +
  • + Qui oficia +
  • +
+
+
+
+ + Incentivized Testnet + +
+
+ +

+ 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. +

+

+ 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. +

+
+
    +
  • + DUIS AUTE +
  • +
  • + Excepteur sint +
  • +
  • + Sunt in culpa +
  • +
  • + Qui oficia +
  • +
+
+
+
+ ) +} + +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) => { + return ( + + + + + + + + ) +} + +export default Careers