[Section] Seen In (#4)

src/components/sections/homepage/seen-in/index.tsx

@@ -0,0 +1,79 @@
+import clsx from 'clsx'
+import Marquee from 'react-fast-marquee'
+
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import CoinTelegraph from '~/components/logos/cointelegraph'
+import Cross from '~/components/logos/cross'
+import Eden from '~/components/logos/eden'
+import Key from '~/components/logos/key'
+import Protocol from '~/components/logos/protocol'
+import Square from '~/components/logos/square'
+import Uniswap from '~/components/logos/uniswap'
+import Heading from '~/components/primitives/heading'
+
+import Item from './item'
+import s from './seen-in.module.scss'
+
+const SeenIn = () => {
+  return (
+    <Section className={s['section']}>
+      <Container>
+        <Heading as="h2" variant="sm" centered>
+          Seen In
+        </Heading>
+        <img
+          className={clsx(s['image'], 'hide-on-mobile')}
+          src="/images/seen-in-circle.png"
+          alt=""
+        />
+        <img
+          className={clsx(s['image'], 'hide-on-desktop')}
+          src="/images/seen-in-circle-mobile.png"
+          alt=""
+        />
+        <Marquee
+          gradientColor={[0, 0, 220]}
+          className={s['marquee__container']}
+          speed={30}
+        >
+          <div className={s['marquee']}>
+            <Item>
+              <Uniswap />
+            </Item>
+            <Item>
+              <Cross style={{ width: '50%' }} />
+            </Item>
+            <Item>
+              <Eden style={{ width: '90%' }} />
+            </Item>
+            <Item>
+              <Protocol style={{ width: '50%' }} />
+            </Item>
+            <Item>
+              <Key style={{ width: '50%' }} />
+            </Item>
+            <Item>
+              <CoinTelegraph style={{ width: '50%' }} />
+            </Item>
+            <Item>
+              <Square style={{ width: '50%' }} />
+            </Item>
+          </div>
+        </Marquee>
+        <div className={s['grid']}>
+          <p>
+            Quickly and easily build blockchain applications with the fastest,
+            most accurate, and lowest cost multi-chain verifiable data solution.
+          </p>
+          <p>
+            Unparalleled flexibility. Supports hash-linked data including
+            blockchain
+          </p>
+        </div>
+      </Container>
+    </Section>
+  )
+}
+
+export default SeenIn

src/components/sections/homepage/seen-in/item/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import s from './item.module.scss'
+
+type ItemProps = {
+  children: React.ReactNode
+}
+
+const Item = ({ children }: ItemProps) => {
+  return <div className={s['item']}>{children}</div>
+}
+
+export default Item

src/components/sections/homepage/seen-in/item/item.module.scss

@@ -0,0 +1,21 @@
+@import '~/css/helpers';
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: tovw(137px, 'default', 63px);
+  height: tovw(137px, 'default', 63px);
+  border-radius: 100%;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgb(255 255 255 / 0) 0%,
+    rgb(255 255 255 / 0.5) 100%
+  );
+  box-shadow: inset 0 0 0 1px var(--color-white);
+  padding: tovw(8px, 'default', 6px);
+
+  svg {
+    width: 100%;
+  }
+}

src/components/sections/homepage/seen-in/seen-in.module.scss

@@ -0,0 +1,80 @@
+@import '~/css/helpers';
+
+.section {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--vh) * 152);
+  margin-top: tovw(24px, 'default', 16px);
+  padding: tovw(104px, 'default', 72px) 0;
+  background: linear-gradient(
+    180deg,
+    rgb(0 0 244 / 0) 1.63%,
+    rgb(0 0 244 / 0.9) 42.64%,
+    rgb(0 0 244 / 0.9) 56.97%,
+    rgb(0 0 244 / 0) 99.89%
+  );
+
+  @media screen and (max-width: 800px) {
+    height: calc(var(--vh) * 95);
+    margin-top: 0;
+    background: linear-gradient(
+      180deg,
+      rgb(0 0 244 / 0) 1.63%,
+      rgb(0 0 244 / 0.9) 34.64%,
+      rgb(0 0 244 / 0.9) 56.97%,
+      rgb(0 0 244 / 0) 99.89%
+    );
+  }
+
+  .image {
+    position: absolute;
+    z-index: 5;
+    top: 50%;
+    left: 50%;
+    width: tovw(1104px, 'default', 375px);
+    height: tovw(869px, 'default', 441px);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+
+    @media screen and (max-width: 800px) {
+      top: 45%;
+    }
+  }
+
+  .grid {
+    display: grid;
+    margin-top: tovw(284px, 'default', 150px);
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: tovw(24px, 'default', 24px);
+
+    @media screen and (max-width: 800px) {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    p {
+      &:first-of-type {
+        grid-area: 1 / 2 / 2 / 7;
+      }
+
+      &:last-of-type {
+        grid-area: 1 / 7 / 2 / 12;
+      }
+    }
+  }
+}
+
+.marquee {
+  display: flex;
+
+  > div {
+    margin-right: tovw(53px, 'default', 40px);
+  }
+
+  &__container {
+    margin-top: tovw(280px, 'default', 135px);
+  }
+}

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '~/components/common/meta'
 import { PageLayout } from '~/components/layout/page'
 import Hero from '~/components/sections/homepage/hero'
+import SeenIn from '~/components/sections/homepage/seen-in'
 import TrustedBy from '~/components/sections/homepage/trusted-by'
 
 import { Page } from './_app'
@@ -11,6 +12,7 @@ const HomePage: Page = () => {
       <Meta />
       <Hero />
       <TrustedBy />
+      <SeenIn />
     </PageLayout>
   )
 }