From a2e90828a3730c82253d20b87564b66a366a76d6 Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Tue, 29 Mar 2022 11:08:49 -0300
Subject: [PATCH] Homepage Hero (#2)

---
 public/images/hero-mobile.png                 | Bin 0 -> 9318 bytes
 .../common/footer/footer.module.scss          |  12 --
 src/components/common/footer/index.tsx        |   4 +-
 src/components/icons/arrow.tsx                |  15 ++-
 src/components/icons/flag.tsx                 |  15 +++
 src/components/icons/line.tsx                 |  27 ++++
 .../layout/section/section.module.scss        |  22 +--
 .../primitives/button/button.module.scss      |   4 +-
 .../primitives/heading/heading.module.scss    |   2 +-
 .../sections/homepage/hero/hero.module.scss   | 125 ++++++++++++++++--
 .../sections/homepage/hero/index.tsx          |  59 ++++++++-
 11 files changed, 228 insertions(+), 57 deletions(-)
 create mode 100644 public/images/hero-mobile.png
 create mode 100644 src/components/icons/flag.tsx
 create mode 100644 src/components/icons/line.tsx

diff --git a/public/images/hero-mobile.png b/public/images/hero-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f56b4ac0be3af5451a50ba1c8745c18446b955d
GIT binary patch
literal 9318
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

literal 0
HcmV?d00001

diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 463d8e9..0767c6e 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -63,18 +63,6 @@
       height: 100%;
       pointer-events: none;
       user-select: none;
-
-      &::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: -1;
-        background: radial-gradient(circle, transparent 0, #fdbb2d 100%);
-        height: calc(var(--vh) * 63);
-        content: '';
-        filter: blur(30px);
-      }
     }
   }
 
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index d632700..fabe25b 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -21,10 +21,10 @@ export const Footer = () => {
     <>
       <Section className={s['pre__footer--section']}>
         <video
-          autoPlay
+          // autoPlay
           className={clsx('hide-on-mobile', s['video'])}
           controls={false}
-          loop
+          // loop
           muted
           preload="true"
         >
diff --git a/src/components/icons/arrow.tsx b/src/components/icons/arrow.tsx
index 8089b97..6c184b8 100644
--- a/src/components/icons/arrow.tsx
+++ b/src/components/icons/arrow.tsx
@@ -25,11 +25,20 @@ const ArrowDotted = ({
     <svg
       className={className}
       fill="none"
-      viewBox="0 0 42 14"
+      viewBox="0 0 18 26"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="m1 35 6 6 6-6" stroke={fill || '#fff'} />
-      <path d="M7 41V0" stroke={fill || '#fff'} strokeDasharray="2 2" />
+      <path
+        d="m1 16 8 8 8-8"
+        stroke={fill || 'var(--color-white)'}
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9 24V0"
+        stroke={fill || 'var(--color-white)'}
+        strokeWidth="1.5"
+        strokeDasharray="4 4"
+      />
     </svg>
   )
 }
diff --git a/src/components/icons/flag.tsx b/src/components/icons/flag.tsx
new file mode 100644
index 0000000..c345b3d
--- /dev/null
+++ b/src/components/icons/flag.tsx
@@ -0,0 +1,15 @@
+const Flag = ({ className, fill }: { className?: string; fill?: string }) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 36 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill={fill || 'var(--color-white)'} d="M0 0h36v20H0z" />
+      <path stroke="#040404" strokeWidth="2" d="M0 7h36M9 0v20" />
+    </svg>
+  )
+}
+
+export default Flag
diff --git a/src/components/icons/line.tsx b/src/components/icons/line.tsx
new file mode 100644
index 0000000..8f54cf7
--- /dev/null
+++ b/src/components/icons/line.tsx
@@ -0,0 +1,27 @@
+const Line = ({ className, fill }: { className?: string; fill?: string }) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 3 72"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path stroke="url(#heroline)" strokeWidth="3" d="M1.5 0v72" />
+      <defs>
+        <linearGradient
+          id="heroline"
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="72"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={fill || 'var(--color-white)'} stopOpacity="0" />
+          <stop offset="1" stopColor={fill || 'var(--color-white)'} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default Line
diff --git a/src/components/layout/section/section.module.scss b/src/components/layout/section/section.module.scss
index 7f5f0c3..957b361 100644
--- a/src/components/layout/section/section.module.scss
+++ b/src/components/layout/section/section.module.scss
@@ -1,30 +1,14 @@
 @import '~/css/helpers';
 
-.base:not(.variant-unstyled) {
+.base {
   position: relative;
   overflow: hidden;
-}
-
-.variant-stripes,
-.variant-stripes-center {
-  background-color: theme('colors.pink');
-  overflow: hidden;
-}
-
-.stripesBase {
-  top: tovw(-524px);
-  left: tovw(-342px);
-  width: tovw(2605px, 'desktop-large');
-  height: tovw(2460px, 'desktop-large');
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
+  padding: 0 tovw(56px, 'default', 16px);
 }
 
 .children {
-  z-index: 1;
   position: relative;
+  z-index: 1;
   width: 100%;
   height: 100%;
 }
diff --git a/src/components/primitives/button/button.module.scss b/src/components/primitives/button/button.module.scss
index ccf1c47..78bf377 100644
--- a/src/components/primitives/button/button.module.scss
+++ b/src/components/primitives/button/button.module.scss
@@ -7,12 +7,12 @@
   border-radius: tovw(4px);
   background: transparent;
   cursor: pointer;
-  padding: tovw(16px, 'default', 10px) tovw(32px, 'default', 14px);
+  padding: tovw(16px, 'default', 16px) tovw(32px, 'default', 14px);
   text-transform: uppercase;
   line-height: 1;
   color: var(--color-white);
   font-family: var(--font-dm-mono);
-  font-size: tovw(18px, 'default', 14px);
+  font-size: tovw(18px, 'default', 18px);
   appearance: none;
 
   &:disabled {
diff --git a/src/components/primitives/heading/heading.module.scss b/src/components/primitives/heading/heading.module.scss
index 1ffe3e5..bc6c11c 100644
--- a/src/components/primitives/heading/heading.module.scss
+++ b/src/components/primitives/heading/heading.module.scss
@@ -11,7 +11,7 @@
   }
 
   &--xl {
-    font-size: tovw(110px, 'default', 48px);
+    font-size: tovw(110px, 'default', 50px);
     line-height: 1.1;
     letter-spacing: tovw(-3px);
   }
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index 6132f71..7544240 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -1,32 +1,128 @@
+@import '~/css/helpers';
+
 .section {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  height: calc(var(--vh) * 118 - var(--header-height));
+  max-width: 100%;
+  min-height: calc(var(--vh) * 100);
   text-align: center;
 
+  @media screen and (max-width: 800px) {
+    background-image: url('/images/hero-mobile.png');
+    background-repeat: no-repeat;
+    background-position: 50% 15%;
+    background-size: 100%;
+  }
+
+  @supports (aspect-ratio: 16 / 9) {
+    aspect-ratio: 16 / 9;
+  }
+
   &::after,
   &::before {
     position: absolute;
     z-index: -1;
-    bottom: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
     width: 100%;
-    height: calc(var(--vh) * 95);
+    height: 100%;
     content: '';
-  }
-
-  &::after {
-    background: radial-gradient(
-      circle,
-      rgb(0 0 0 / 0.5) 45%,
-      hsl(0deg 0% 100% / 0) 100%
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: linear-gradient(
+      0deg,
+      black 15%,
+      rgb(9 9 121 / 0) 50%,
+      black 100%
     );
+    @supports (aspect-ratio: 16 / 9) {
+      aspect-ratio: 16 / 9;
+    }
+    @media screen and (max-width: 800px) {
+      content: initial;
+    }
   }
 
   &::before {
-    background: linear-gradient(0deg, #000 50%, hsl(0deg 0% 100% / 0));
+    width: 120%;
+    height: 115%;
+    background: radial-gradient(
+      ellipse farthest-corner at center center,
+      rgb(4 4 4 / 0.25) 45%,
+      #000 0
+    );
+    filter: blur(tovw(80px, 'default', 40px));
+  }
+
+  .line {
+    width: tovw(3px, 'default', 2px);
+    height: tovw(72px, 'default', 56px);
+    margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
+  }
+
+  .arrow {
+    width: tovw(16px, 'default', 12px);
+    height: tovw(24px, 'default', 24px);
+  }
+
+  .flag {
+    width: tovw(36px, 'default', 36px);
+    height: tovw(20px, 'default', 20px);
+    margin: 0 auto tovw(8px, 'default', 6px) auto;
+  }
+
+  p {
+    margin: 0 auto;
+  }
+
+  .scroll {
+    position: absolute;
+    bottom: 11%;
+    left: tovw(56px, 'default', 16px);
+    display: grid;
+    align-items: flex-end;
+    width: calc(100% - (tovw(56px, 'default', 16px) * 2));
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+
+    @media screen and (max-width: 800px) {
+      grid-template-columns: 1fr;
+      bottom: 5%;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+    }
+
+    p,
+    li {
+      font-family: var(--font-dm-mono);
+      font-size: tovw(12px, 'default', 11px);
+      line-height: 1.7;
+      text-transform: uppercase;
+      font-variant-numeric: tabular-nums;
+    }
+
+    > div {
+      &:first-of-type {
+        display: flex;
+        justify-self: flex-start;
+      }
+
+      &:last-of-type {
+        text-align: right;
+        justify-self: flex-end;
+
+        span {
+          display: inline-block;
+          width: tovw(55px, 'default', 40px);
+        }
+      }
+    }
   }
 
   .video {
@@ -39,4 +135,9 @@
     user-select: none;
     pointer-events: none;
   }
+
+  .mobile__button {
+    width: 100%;
+    margin: tovw(48px, 'mobile', 40px) 0 0 0;
+  }
 }
diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx
index c6dacbc..1d3b57e 100644
--- a/src/components/sections/homepage/hero/index.tsx
+++ b/src/components/sections/homepage/hero/index.tsx
@@ -1,35 +1,82 @@
 import clsx from 'clsx'
+import { useEffect, useState } from 'react'
 
+import { ArrowDotted } from '~/components/icons/arrow'
+import Flag from '~/components/icons/flag'
+import Line from '~/components/icons/line'
 import Section from '~/components/layout/section'
+import Button from '~/components/primitives/button'
 import Heading from '~/components/primitives/heading'
 import HighlightedText from '~/components/primitives/highlighted-text'
 
 import s from './hero.module.scss'
 
 const Hero = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  useEffect(() => {
+    const setFromEvent = (e: { clientX: any; clientY: any }) =>
+      setPosition({ x: e.clientX, y: e.clientY })
+    window.addEventListener('mousemove', setFromEvent)
+
+    return () => {
+      window.removeEventListener('mousemove', setFromEvent)
+    }
+  }, [])
+
   return (
     <Section className={s['section']}>
       <video
-        autoPlay
+        // autoPlay
         className={clsx('hide-on-mobile', s['video'])}
         controls={false}
-        loop
+        // loop
         muted
         preload="true"
       >
         <source src="/videos/hero-grid.mp4" type="video/mp4" />
       </video>
       <Heading as="h1" variant="xl" centered>
-        The <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
+        The <br className="hide-on-desktop" />{' '}
+        <HighlightedText>Multi-chain</HighlightedText> <br /> Verifable Data
         Marketplace
       </Heading>
+      <Line className={s['line']} />
       <p>
         From months to minutes. Laconic accelerates <br /> your DApp
         development, interoperability, <br /> and user adoption.
       </p>
-      <Heading as="h5" variant="xs" font="dmmono" centered>
-        Scroll Down
-      </Heading>
+      <Button
+        variant="primary"
+        className={clsx(s['mobile__button'], 'hide-on-desktop')}
+      >
+        Get Started
+      </Button>
+      <div className={s['scroll']}>
+        <div className="hide-on-mobile">
+          <p>C:</p>
+          <Flag className={s['flag']} />
+        </div>
+        <div>
+          <Heading as="h5" variant="xs" font="dmmono" centered>
+            Scroll Down
+          </Heading>
+          <ArrowDotted className={s['arrow']} />
+        </div>
+        <div className="hide-on-mobile">
+          <p>Home</p>
+          <ul>
+            <li>
+              H:
+              <span>{position.x} PX</span>
+            </li>
+            <li>
+              V:
+              <span>{position.y} PX</span>
+            </li>
+          </ul>
+        </div>
+      </div>
     </Section>
   )
 }