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 = () => { + ) }