diff --git a/public/images/seen-in-circle-mobile.png b/public/images/seen-in-circle-mobile.png
new file mode 100644
index 0000000..a6b7511
Binary files /dev/null and b/public/images/seen-in-circle-mobile.png differ
diff --git a/public/images/seen-in-circle.png b/public/images/seen-in-circle.png
new file mode 100644
index 0000000..301c95e
Binary files /dev/null and b/public/images/seen-in-circle.png differ
diff --git a/src/components/sections/homepage/seen-in/index.tsx b/src/components/sections/homepage/seen-in/index.tsx
new file mode 100644
index 0000000..7b7c351
--- /dev/null
+++ b/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 (
+
+
+
+ Seen In
+
+
+
+
+
+
+ Quickly and easily build blockchain applications with the fastest,
+ most accurate, and lowest cost multi-chain verifiable data solution.
+
+
+ Unparalleled flexibility. Supports hash-linked data including
+ blockchain
+
+
+
+
+ )
+}
+
+export default SeenIn
diff --git a/src/components/sections/homepage/seen-in/item/index.tsx b/src/components/sections/homepage/seen-in/item/index.tsx
new file mode 100644
index 0000000..56b1c17
--- /dev/null
+++ b/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
{children}
+}
+
+export default Item
diff --git a/src/components/sections/homepage/seen-in/item/item.module.scss b/src/components/sections/homepage/seen-in/item/item.module.scss
new file mode 100644
index 0000000..6361132
--- /dev/null
+++ b/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%;
+ }
+}
diff --git a/src/components/sections/homepage/seen-in/seen-in.module.scss b/src/components/sections/homepage/seen-in/seen-in.module.scss
new file mode 100644
index 0000000..bdacd01
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0877fc1..5f3ee48 100644
--- a/src/pages/index.tsx
+++ b/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 = () => {
+
)
}