From 3a3d7db7076ef5f2afc0cc88e61baf20ac67fc11 Mon Sep 17 00:00:00 2001 From: Nazareno Oviedo Date: Tue, 29 Mar 2022 12:45:49 -0300 Subject: [PATCH] [Section] Trusted By (#3) --- src/components/logos/cointelegraph.tsx | 28 +++++++++ src/components/logos/cross.tsx | 43 ++++++++++++++ src/components/logos/eden.tsx | 36 ++++++++++++ src/components/logos/key.tsx | 29 ++++++++++ src/components/logos/protocol.tsx | 41 +++++++++++++ src/components/logos/square.tsx | 36 ++++++++++++ src/components/logos/uniswap.tsx | 36 ++++++++++++ .../sections/homepage/hero/index.tsx | 2 +- .../sections/homepage/trusted-by/index.tsx | 58 +++++++++++++++++++ .../homepage/trusted-by/item/index.tsx | 13 +++++ .../homepage/trusted-by/item/item.module.scss | 21 +++++++ .../trusted-by/trusted-by.module.scss | 49 ++++++++++++++++ src/css/global.scss | 2 - src/pages/index.tsx | 2 + 14 files changed, 393 insertions(+), 3 deletions(-) create mode 100644 src/components/logos/cointelegraph.tsx create mode 100644 src/components/logos/cross.tsx create mode 100644 src/components/logos/eden.tsx create mode 100644 src/components/logos/key.tsx create mode 100644 src/components/logos/protocol.tsx create mode 100644 src/components/logos/square.tsx create mode 100644 src/components/logos/uniswap.tsx create mode 100644 src/components/sections/homepage/trusted-by/index.tsx create mode 100644 src/components/sections/homepage/trusted-by/item/index.tsx create mode 100644 src/components/sections/homepage/trusted-by/item/item.module.scss create mode 100644 src/components/sections/homepage/trusted-by/trusted-by.module.scss diff --git a/src/components/logos/cointelegraph.tsx b/src/components/logos/cointelegraph.tsx new file mode 100644 index 0000000..8ed13cd --- /dev/null +++ b/src/components/logos/cointelegraph.tsx @@ -0,0 +1,28 @@ +import { CSSProperties } from 'react' + +const CoinTelegraph = ({ + className, + fill, + style +}: { + className?: string + fill?: string + style?: CSSProperties +}) => { + return ( + + + + + + + ) +} + +export default CoinTelegraph diff --git a/src/components/logos/cross.tsx b/src/components/logos/cross.tsx new file mode 100644 index 0000000..9f13d82 --- /dev/null +++ b/src/components/logos/cross.tsx @@ -0,0 +1,43 @@ +import { CSSProperties } from 'react' + +const Cross = ({ + className, + fill, + style +}: { + className?: string + fill?: string + style?: CSSProperties +}) => { + return ( + + + + + + + + + + + + + + ) +} + +export default Cross diff --git a/src/components/logos/eden.tsx b/src/components/logos/eden.tsx new file mode 100644 index 0000000..1cfbb28 --- /dev/null +++ b/src/components/logos/eden.tsx @@ -0,0 +1,36 @@ +import { CSSProperties } from 'react' + +const Eden = ({ + className, + fill, + style +}: { + className?: string + fill?: string + style?: CSSProperties +}) => { + return ( + + + + + + + + + + + ) +} + +export default Eden diff --git a/src/components/logos/key.tsx b/src/components/logos/key.tsx new file mode 100644 index 0000000..8882465 --- /dev/null +++ b/src/components/logos/key.tsx @@ -0,0 +1,29 @@ +import { CSSProperties } from 'react' + +const Key = ({ + className, + fill, + style +}: { + className?: string + fill?: string + style?: CSSProperties +}) => { + return ( + + + + + + + + ) +} + +export default Key diff --git a/src/components/logos/protocol.tsx b/src/components/logos/protocol.tsx new file mode 100644 index 0000000..c1fc681 --- /dev/null +++ b/src/components/logos/protocol.tsx @@ -0,0 +1,41 @@ +import { CSSProperties } from 'react' + +const Protocol = ({ + className, + fill, + style +}: { + className?: string + fill?: string + style?: CSSProperties +}) => { + return ( + + + + + + + + + + + ) +} + +export default Protocol diff --git a/src/components/logos/square.tsx b/src/components/logos/square.tsx new file mode 100644 index 0000000..0adc6f0 --- /dev/null +++ b/src/components/logos/square.tsx @@ -0,0 +1,36 @@ +import { CSSProperties } from 'react' + +const Square = ({ + className, + fill, + style +}: { + className?: string + fill?: string + style?: CSSProperties +}) => { + return ( + + + + + + + + + + + + ) +} + +export default Square diff --git a/src/components/logos/uniswap.tsx b/src/components/logos/uniswap.tsx new file mode 100644 index 0000000..058e589 --- /dev/null +++ b/src/components/logos/uniswap.tsx @@ -0,0 +1,36 @@ +const Uniswap = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + + + + + + + + + + ) +} + +export default Uniswap diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx index 1d3b57e..8a37e83 100644 --- a/src/components/sections/homepage/hero/index.tsx +++ b/src/components/sections/homepage/hero/index.tsx @@ -5,7 +5,7 @@ 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 { Button } from '~/components/primitives/button' import Heading from '~/components/primitives/heading' import HighlightedText from '~/components/primitives/highlighted-text' diff --git a/src/components/sections/homepage/trusted-by/index.tsx b/src/components/sections/homepage/trusted-by/index.tsx new file mode 100644 index 0000000..6b01de0 --- /dev/null +++ b/src/components/sections/homepage/trusted-by/index.tsx @@ -0,0 +1,58 @@ +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 './trusted-by.module.scss' + +const TrustedBy = () => { + return ( +
+ + + Trusted By + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + +
+ ) +} + +export default TrustedBy diff --git a/src/components/sections/homepage/trusted-by/item/index.tsx b/src/components/sections/homepage/trusted-by/item/index.tsx new file mode 100644 index 0000000..56b1c17 --- /dev/null +++ b/src/components/sections/homepage/trusted-by/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/trusted-by/item/item.module.scss b/src/components/sections/homepage/trusted-by/item/item.module.scss new file mode 100644 index 0000000..6361132 --- /dev/null +++ b/src/components/sections/homepage/trusted-by/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/trusted-by/trusted-by.module.scss b/src/components/sections/homepage/trusted-by/trusted-by.module.scss new file mode 100644 index 0000000..cffa6cf --- /dev/null +++ b/src/components/sections/homepage/trusted-by/trusted-by.module.scss @@ -0,0 +1,49 @@ +@import '~/css/helpers'; + +.section { + position: relative; + height: calc(var(--vh) * 50); + margin-top: tovw(24px, 'default', 16px); + padding: tovw(104px, 'default', 72px) 0; + + @media screen and (max-width: 800px) { + height: calc(var(--vh) * 48); + margin-top: 0; + } + + &::after { + position: absolute; + z-index: 5; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + content: ''; + user-select: none; + transform: translate(-50%, -40%); + pointer-events: none; + opacity: 0.4; + background: linear-gradient( + 180deg, + hsl(0deg 0% 90% / 0), + hsl(0deg 0% 95% / 0.5) 48.91%, + hsl(0deg 0% 95% / 0) 89.23% + ); + @media screen and (max-width: 800px) { + height: 50%; + transform: translate(-50%, -60%); + } + } +} + +.marquee { + display: flex; + + > div { + margin-right: tovw(53px, 'default', 40px); + } + + &__container { + margin-top: tovw(60px, 'default', 43px); + } +} diff --git a/src/css/global.scss b/src/css/global.scss index f1b81bb..7a3e145 100644 --- a/src/css/global.scss +++ b/src/css/global.scss @@ -2,8 +2,6 @@ @import './fonts.css'; @import './helpers'; -// @import '../lib/locomotive-scroll/scroll.css'; - :root { --inspect-color: #f00; --font-system: -apple-system, blinkmacsystemfont, segoe ui, roboto, oxygen, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e552071..0877fc1 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 TrustedBy from '~/components/sections/homepage/trusted-by' import { Page } from './_app' @@ -9,6 +10,7 @@ const HomePage: Page = () => { + ) }