[Section] Trusted By (#3)
This commit is contained in:
Nazareno Oviedo
GitHub
parent
a2e90828a3
commit
3a3d7db707
28
src/components/logos/cointelegraph.tsx
Normal file
28
src/components/logos/cointelegraph.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const CoinTelegraph = ({
|
||||
className,
|
||||
fill,
|
||||
style
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
style?: CSSProperties
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
fill="none"
|
||||
style={style}
|
||||
viewBox="0 0 51 47"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity=".9" fill={fill || 'var(--color-white)'}>
|
||||
<path d="m29.246 33.972-8.408 3.614v-.361c-1.621.41-3.417.646-5.118.722-7.908-.076-14.184-4.167-14.257-9.035v-1.807c2.597 3.733 7.884 6.235 14.257 6.144 2.156.09 4.361-.247 6.214-.723l.732-1.807c-2.198.648-4.598 1.1-6.946 1.084-7.908.015-14.184-4.076-14.257-9.034v-1.446c2.597 3.45 7.872 5.953 14.257 5.782 2.872.171 5.68-.426 8.042-1.445l.366-1.808c-2.307 1.204-5.298 1.902-8.408 1.808-7.908.094-14.184-3.997-14.257-9.035v-1.446c2.597 3.531 7.884 6.033 14.257 6.144 3.622-.11 7.056-1.058 9.87-2.53l.366-2.17c-2.555 1.873-6.284 3.08-10.236 3.254-7.908-.175-14.184-4.267-14.257-9.396.073-4.88 6.35-8.97 14.257-9.035 4.714.065 9.092 1.699 11.699 4.337l.253.417 1.844.008-.27-.425C26.654 2.299 21.468 0 15.72 0 6.97 0 0 4.767 0 10.48v18.793c.307 5.577 7.119 10.12 15.72 10.12 5.68 0 10.786-2.21 13.526-5.42Z" />
|
||||
<path d="m26.273 46.428 2.952-12.402-8.486 3.648 5.166-21.52h-9.963l2.583-10.578h31.73l-2.583 10.578h-10.33l-2.214 5.835 11.437-4.741-20.292 29.18Zm5.166-14.956-1.476 7.296L42.138 20.53l-9.962 4.377 4.428-10.213h9.961l1.845-7.66H19.632l-1.845 7.66h9.962L22.953 35.12l8.486-3.647v-.002Z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoinTelegraph
|
||||
43
src/components/logos/cross.tsx
Normal file
43
src/components/logos/cross.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const Cross = ({
|
||||
className,
|
||||
fill,
|
||||
style
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
style?: CSSProperties
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 43 43"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={style}
|
||||
>
|
||||
<g
|
||||
opacity=".9"
|
||||
clipPath="url(#cross)"
|
||||
fill={fill || 'var(--color-white)'}
|
||||
>
|
||||
<path d="M11.094 42.294c-4.436 0-8.437-2.616-10.138-6.637-1.7-4.022-.767-8.648 2.384-11.721l.084-.082L17.947 9.616l2.367 2.321-14.59 14.32c-1.984 1.88-2.784 4.66-2.084 7.275.7 2.615 2.785 4.659 5.453 5.345a7.759 7.759 0 0 0 7.42-2.027l1.4-1.373 2.368 2.321-1.4 1.39a11.318 11.318 0 0 1-7.787 3.106Z" />
|
||||
<path d="M31.103 20.438 16.496 6.117a7.771 7.771 0 0 0-7.37-1.93 7.588 7.588 0 0 0-5.402 5.28c-.7 2.583.05 5.33 1.968 7.226l1.4 1.373-2.367 2.321-1.401-1.373C.556 16.302-.528 12.33.489 8.618c1.017-3.71 3.969-6.62 7.754-7.601 3.785-.98 7.837.065 10.605 2.779l.083.082 14.54 14.238-2.368 2.322Z" />
|
||||
<path d="m24.817 33.385-2.368-2.305 14.606-14.32c2.902-2.927 2.852-7.602-.083-10.495-2.951-2.894-7.704-2.927-10.705-.082l-1.4 1.373-2.368-2.321 1.4-1.374c2.768-2.713 6.82-3.776 10.605-2.779 3.785.998 6.753 3.891 7.754 7.602 1.017 3.71-.067 7.683-2.835 10.397L24.817 33.385Z" />
|
||||
<path d="M31.654 42.343a10.94 10.94 0 0 1-7.754-3.155L9.294 24.868l2.367-2.322 14.607 14.32c2.985 2.927 7.803 2.927 10.788 0a7.366 7.366 0 0 0 0-10.576l-1.4-1.373 2.367-2.322 1.4 1.374c3.136 3.073 4.086 7.7 2.385 11.72-1.717 4.022-5.719 6.654-10.154 6.654Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="cross">
|
||||
<path
|
||||
fill="#fff"
|
||||
transform="translate(.106 .657)"
|
||||
d="M0 0h42.519v41.685H0z"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cross
|
||||
36
src/components/logos/eden.tsx
Normal file
36
src/components/logos/eden.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const Eden = ({
|
||||
className,
|
||||
fill,
|
||||
style
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
style?: CSSProperties
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
fill="none"
|
||||
style={style}
|
||||
viewBox="0 0 93 27"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity=".9" clipPath="url(#eden)" fill={fill || 'var(--color-white)'}>
|
||||
<path d="M84.029 7.934h-7.343v16.553h2.391V10.28h4.952a6.371 6.371 0 0 1 4.455 1.813 6.132 6.132 0 0 1 1.848 4.37v8.025h2.39v-8.025a8.458 8.458 0 0 0-2.549-6.029 8.788 8.788 0 0 0-6.144-2.5M24.267 14.77v9.717h13.668v-2.332H26.643V17.1h11.292v-2.332l-13.668.002ZM37.912 7.934H24.267v2.33h13.645v-2.33ZM52.235 10.155A8.522 8.522 0 0 0 49.67 8.52a7.149 7.149 0 0 0-2.662-.566h-4.64v2.29h4.167a5.978 5.978 0 0 1 2.513.512c.72.325 1.37.784 1.914 1.351a6.112 6.112 0 0 1 1.227 1.91 5.806 5.806 0 0 1 .314 3.476 5.882 5.882 0 0 1-1.74 3.044 6.264 6.264 0 0 1-1.957 1.223 6.153 6.153 0 0 1-2.277.437h-.381v2.332H47a7.141 7.141 0 0 0 2.91-.634 8.468 8.468 0 0 0 2.533-1.733 8.736 8.736 0 0 0 1.798-2.612 8.269 8.269 0 0 0-.08-6.783 8.817 8.817 0 0 0-1.932-2.61M72.328 7.934H58.684v2.33h13.644v-2.33ZM58.684 14.77v9.717H72.35v-2.332H61.06V17.1h11.29v-2.332l-13.666.002ZM2.51 18.254v-5.04l5.294 5.389L5.6 21.14 2.51 18.254Zm8.973.303 5.25-5.343v5.07l-2.805 2.854-2.445-2.58Zm-.7-13.832 5.497 5.594-5.496 5.594V4.725Zm-7.85 5.57 5.52-5.619v11.236l-5.52-5.617ZM9.595.16.177 9.746v9.551l5.591 5.226 2.686-3.09v5.407h2.33v-5.598l3.111 3.284 5.166-5.258V9.794L9.595.161Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="eden">
|
||||
<path
|
||||
fill="#fff"
|
||||
transform="translate(.18 .16)"
|
||||
d="M0 0h92.542v26.679H0z"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Eden
|
||||
29
src/components/logos/key.tsx
Normal file
29
src/components/logos/key.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const Key = ({
|
||||
className,
|
||||
fill,
|
||||
style
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
style?: CSSProperties
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
fill="none"
|
||||
style={style}
|
||||
viewBox="0 0 43 43"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity=".9" fill={fill || 'var(--color-white)'}>
|
||||
<path d="M36.74 19.656c1.502 0 3.041-.003 4.58.002.97.003.876-.13.885.878.009.964.043 1.937-.073 2.89-.128 1.052-.398 2.09-.632 3.128-.316 1.41-.877 2.725-1.525 4.013a20.239 20.239 0 0 1-5.33 6.663c-.63.514-1.315.955-1.96 1.447-.2.152-.278.083-.326-.104-.246-.959-.471-1.925-.73-2.88-.318-1.188-.664-2.37-.993-3.554-.17-.61-.348-1.222-.474-1.844-.026-.131.137-.318.242-.457.613-.819 1.273-1.603 1.835-2.453.376-.568.611-1.227.923-1.839.049-.093.165-.214.251-.216.862-.016 1.723-.01 2.632-.01a11.245 11.245 0 0 1-1.228 3.064c-.45.788-1.006 1.515-1.496 2.282-.088.139-.147.351-.109.504.212.881.447 1.755.693 2.626.06.213.197.262.37.06.555-.648 1.15-1.261 1.673-1.933 1.008-1.295 1.782-2.737 2.367-4.264.327-.854.555-1.75.763-2.644.168-.719.24-1.458.355-2.189.054-.342-.092-.446-.433-.443-1.511.016-3.023.007-4.534.007h-.55c0-.48-.004-.921 0-1.362.032-3.683-1.396-6.742-4.028-9.251C28.55 10.5 26.985 9.56 25.191 9.05c-.693-.197-1.4-.343-2.105-.499-.317-.07-.435.075-.426.4.019.677.015 1.354.002 2.03-.008.327.15.463.448.505 1.622.229 3.042.935 4.304 1.937a9.513 9.513 0 0 1 3.137 4.415c.435 1.26.665 2.585.53 3.922-.282 2.765-1.433 5.097-3.603 6.887-.01.009-.012.03-.022.037-.534.261-.767.583-.515 1.234.296.76.452 1.574.664 2.367.193.725.375 1.453.57 2.178.207.779.425 1.555.634 2.332.193.712.378 1.423.568 2.135.1.367.213.73.29 1.103.019.091-.065.277-.139.303-1.066.365-2.128.75-3.212 1.052a17.439 17.439 0 0 1-5.599.64 22.384 22.384 0 0 1-3.556-.475c-1.224-.263-2.415-.682-3.619-1.039-.185-.055-.36-.152-.597-.256.09-.409.168-.824.275-1.231.205-.78.426-1.555.64-2.332.205-.75.411-1.5.614-2.25.199-.739.39-1.478.588-2.217.207-.764.394-1.534.63-2.29.177-.56.153-.796-.294-1.144-1.497-1.17-2.59-2.645-3.237-4.425-.51-1.4-.7-2.87-.521-4.35.28-2.326 1.232-4.366 2.938-5.996 1.205-1.152 2.607-1.998 4.259-2.374.123-.028.237-.104.36-.13.738-.15.738-.147.738-.904 0-1.454.008-2.909-.006-4.363-.003-.346.12-.424.458-.504 1.03-.246 2.044-.026 3.038.094 2.166.263 4.181 1.023 6.042 2.188a15.43 15.43 0 0 1 4.177 3.849c.93 1.241 1.696 2.59 2.14 4.088.35 1.198.628 2.415.957 3.69ZM16.21 38.578c.455.1.8.2 1.15.251 1.138.17 2.278.39 3.424.463.893.055 1.8-.068 2.7-.137a15.025 15.025 0 0 0 1.57-.211 7.554 7.554 0 0 0 1.144-.322c.095-.035.216-.23.194-.316-.24-.914-.52-1.817-.767-2.73-.412-1.515-.812-3.035-1.212-4.553-.284-1.077-.561-2.154-.816-3.14.781-.503 1.574-.936 2.275-1.485 1.49-1.167 2.248-2.779 2.468-4.619.171-1.427-.128-2.798-.831-4.069-1.098-1.987-2.791-3.206-4.997-3.584-1.474-.252-2.96-.083-4.329.65-2.13 1.139-3.419 2.91-3.793 5.277a6.611 6.611 0 0 0 .488 3.77c.781 1.748 2.036 3.01 3.8 3.746.338.14.381.308.28.621a28.24 28.24 0 0 0-.446 1.55c-.197.753-.372 1.513-.574 2.264-.262.97-.542 1.934-.809 2.902-.222.803-.445 1.607-.653 2.415-.104.399-.175.814-.266 1.257Z" />
|
||||
<path d="M3.184 19.625c.22.014.372.031.524.031 1.512.002 3.023 0 4.535.002.537 0 .65.097.549.594-.218 1.068.03 2.1.181 3.144.187 1.276.641 2.455 1.233 3.589.546 1.042 1.254 1.967 2.036 2.841.139.154.236.436.205.634-.089.543-.25 1.075-.393 1.606-.203.752-.42 1.5-.625 2.25-.277 1.009-.55 2.02-.821 3.031-.082.301-.144.608-.224.909-.045.175-.107.345-.18.573C5.256 35.564 2.157 31.111.85 25.342h2.777c.864 3.324 2.45 6.243 4.959 8.695.097-.15.194-.244.225-.355.242-.873.481-1.746.694-2.627.03-.12-.062-.303-.152-.412-.918-1.113-1.624-2.36-2.175-3.679-.336-.803-.54-1.665-.76-2.514-.149-.576-.239-1.168-.325-1.759-.047-.319-.252-.298-.471-.298H1c-.59 0-.617-.001-.596-.597.04-1.162.022-2.334.185-3.478.47-3.297 1.593-6.353 3.508-9.109 2.22-3.198 5.057-5.655 8.627-7.216A30.817 30.817 0 0 1 16.463.666c.814-.235 1.68-.323 2.53-.394 1.14-.096 2.294-.194 3.433-.139 1.119.056 2.23.284 3.338.468 1.49.246 2.89.768 4.26 1.388 1.603.726 3.074 1.657 4.45 2.755 1.964 1.567 3.569 3.443 4.852 5.589.765 1.28 1.421 2.62 1.837 4.067.211.734.434 1.463.646 2.195.017.062-.005.137-.01.242-.849 0-1.684.018-2.515-.017-.124-.005-.31-.235-.346-.39-.383-1.604-1.021-3.106-1.847-4.522a18.233 18.233 0 0 0-4.815-5.424 17.53 17.53 0 0 0-4.457-2.452c-1.374-.512-2.765-.952-4.24-1.028-1.302-.068-2.614-.206-3.906-.104-1.62.128-3.206.514-4.747 1.101A18.138 18.138 0 0 0 8.082 8.58c-1.666 1.768-2.97 3.783-3.754 6.092-.353 1.041-.606 2.116-.865 3.186-.135.549-.18 1.12-.28 1.768Z" />
|
||||
<path d="M6.62 16.838c1.481-5.522 6.258-9.498 10.498-10.5 0 .884.007 1.758-.01 2.633-.002.091-.122.226-.217.263-2.323.898-4.23 2.342-5.71 4.345-.687.93-1.22 1.946-1.66 3.015-.042.102-.182.233-.277.235-.859.017-1.721.009-2.625.009Z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Key
|
||||
41
src/components/logos/protocol.tsx
Normal file
41
src/components/logos/protocol.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const Protocol = ({
|
||||
className,
|
||||
fill,
|
||||
style
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
style?: CSSProperties
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
fill="none"
|
||||
style={style}
|
||||
viewBox="0 0 48 48"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity=".9" clipPath="url(#protocol)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M26.916 7.665c-.493-.283-.49-.742 0-1.022l8.463-4.858c.493-.283 1.293-.282 1.783 0l8.462 4.858c.493.283.49.742 0 1.022l-8.462 4.86c-.492.28-1.293.28-1.783 0l-8.463-4.86Zm10.306 8.037c0-.566.402-1.256.891-1.537l8.46-4.856c.491-.282.89-.044.89.528v23.63c0 .574-.407 1.273-.905 1.56L25.981 46.833c-.5.288-.905.06-.905-.503v-9.717c0-.564.405-1.256.892-1.534l10.36-5.947c.493-.285.893-.977.893-1.538l.001-11.893ZM11.013 39.354c0 .566-.402.795-.89.514l-8.456-4.853c-.494-.283-.891-.98-.891-1.551V9.834c0-.574.408-.805.905-.518L22.26 21.124c.499.287.905.98.905 1.543v9.716c0 .566-.405.791-.895.511l-10.362-5.946c-.493-.285-.894-.05-.894.511v11.895ZM33.46 13.608c.5.287.504.751.014 1.031L25.01 19.5c-.492.283-1.3.277-1.797-.008L2.63 7.677c-.5-.286-.504-.75-.014-1.031l8.466-4.86c.493-.283 1.3-.277 1.798.008l20.58 11.814Zm1.858 12.9c0 .563-.402 1.253-.89 1.532l-8.461 4.857c-.49.283-.891.05-.891-.512V22.67c0-.565.401-1.255.89-1.535l8.463-4.856c.49-.283.89-.05.89.511v9.716ZM22.272 35.08c.493.281.892.972.892 1.534v9.717c0 .566-.402.794-.891.513l-8.458-4.853c-.49-.283-.89-.973-.89-1.535v-9.718c0-.566.402-.794.89-.513l8.457 4.855Z"
|
||||
fill={fill || 'var(--color-white)'}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="protocol">
|
||||
<path
|
||||
fill="#fff"
|
||||
transform="translate(.776 .74)"
|
||||
d="M0 0h46.688v46.688H0z"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Protocol
|
||||
36
src/components/logos/square.tsx
Normal file
36
src/components/logos/square.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const Square = ({
|
||||
className,
|
||||
fill,
|
||||
style
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
style?: CSSProperties
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 45 42"
|
||||
style={style}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity=".9" fill={fill || 'var(--color-white)'}>
|
||||
<path opacity=".2" d="M.343.241h14.729v13.895H.343z" />
|
||||
<path opacity=".5" d="M15.07.241h14.729v13.895H15.07z" />
|
||||
<path d="M29.803.241h14.729v13.895H29.803z" />
|
||||
<path opacity=".5" d="M.343 14.135h14.729V28.03H.343z" />
|
||||
<path d="M.343 28.031h14.729v13.895H.343zM15.07 14.135h14.729V28.03H15.07z" />
|
||||
<path
|
||||
opacity=".5"
|
||||
d="M15.07 28.031h14.729v13.895H15.07zM29.803 14.135h14.729V28.03H29.803z"
|
||||
/>
|
||||
<path opacity=".2" d="M29.803 28.031h14.729v13.895H29.803z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Square
|
||||
36
src/components/logos/uniswap.tsx
Normal file
36
src/components/logos/uniswap.tsx
Normal file
File diff suppressed because one or more lines are too long
@ -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'
|
||||
|
||||
|
||||
58
src/components/sections/homepage/trusted-by/index.tsx
Normal file
58
src/components/sections/homepage/trusted-by/index.tsx
Normal file
@ -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 (
|
||||
<Section className={s['section']}>
|
||||
<Container>
|
||||
<Heading as="h2" variant="sm" centered>
|
||||
Trusted By
|
||||
</Heading>
|
||||
<Marquee
|
||||
gradientColor={[4, 4, 4]}
|
||||
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>
|
||||
</Container>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
export default TrustedBy
|
||||
13
src/components/sections/homepage/trusted-by/item/index.tsx
Normal file
13
src/components/sections/homepage/trusted-by/item/index.tsx
Normal file
@ -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
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
|
||||
@ -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 = () => {
|
||||
<PageLayout>
|
||||
<Meta />
|
||||
<Hero />
|
||||
<TrustedBy />
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user