+ )} + {colorBurn && ( +

+ )} + + )} + + ) +} diff --git a/src/components/common/noise/noise.module.css b/src/components/common/noise/noise.module.css new file mode 100644 index 0000000..24e5ba6 --- /dev/null +++ b/src/components/common/noise/noise.module.css @@ -0,0 +1,77 @@ +.noise { + background-color: white; + background-image: url('/images/noise.png'); + background-repeat: repeat; + background-size: auto; + z-index: 500; + width: 300%; + height: 300%; + left: -100%; + top: -100%; + pointer-events: none; + mix-blend-mode: soft-light; + opacity: 0.2; +} + +.noise2 { + background-color: white; + background-image: url('/images/noise-2.png'); + background-repeat: repeat; + background-size: auto; + z-index: 500; + width: 300%; + height: 300%; + left: -100%; + top: -100%; + pointer-events: none; + mix-blend-mode: color-burn; + opacity: 0.8; + will-change: transform; + animation: grain 16s steps(10) infinite; +} + +@keyframes grain { + 0% { + transform: translate(20%, -15%); + } + + 10% { + transform: translate(-20%, -15%); + } + + 20% { + transform: translate(20%, -5%); + } + + 30% { + transform: translate(-20%, -5%); + } + + 40% { + transform: translate(20%, 5%); + } + + 50% { + transform: translate(-20%, 5%); + } + + 60% { + transform: translate(20%, 15%); + } + + 70% { + transform: translate(-20%, 15%); + } + + 80% { + transform: translate(20%, 5%); + } + + 90% { + transform: translate(-20%, 5%); + } + + 100% { + transform: translate(20%, -5%); + } +} diff --git a/src/components/icons/arrow.tsx b/src/components/icons/arrow.tsx new file mode 100644 index 0000000..8089b97 --- /dev/null +++ b/src/components/icons/arrow.tsx @@ -0,0 +1,59 @@ +const Arrow = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + ) +} + +const ArrowDotted = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +const ArrowLink = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +export { Arrow, ArrowDotted, ArrowLink } diff --git a/src/components/icons/burguer.tsx b/src/components/icons/burguer.tsx new file mode 100644 index 0000000..f955798 --- /dev/null +++ b/src/components/icons/burguer.tsx @@ -0,0 +1,18 @@ +const Burger = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + ) +} + +export default Burger diff --git a/src/components/icons/logo.tsx b/src/components/icons/logo.tsx new file mode 100644 index 0000000..02ac284 --- /dev/null +++ b/src/components/icons/logo.tsx @@ -0,0 +1,72 @@ +const Isotype = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +const Logo = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + ) +} + +const LogoFooter = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +export { Isotype, Logo, LogoFooter } diff --git a/src/components/icons/socials.tsx b/src/components/icons/socials.tsx new file mode 100644 index 0000000..d748489 --- /dev/null +++ b/src/components/icons/socials.tsx @@ -0,0 +1,228 @@ +const Telegram = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +const Twitter = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +const Reddit = ({ className, fill }: { className?: string; fill?: string }) => { + return ( + + ) +} + +const Linkedin = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +const Facebook = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +const Instagram = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + ) +} + +export { Facebook, Instagram, Linkedin, Reddit, Telegram, Twitter } diff --git a/src/components/layout/aspect-box/aspect-box.module.css b/src/components/layout/aspect-box/aspect-box.module.css new file mode 100644 index 0000000..bf34992 --- /dev/null +++ b/src/components/layout/aspect-box/aspect-box.module.css @@ -0,0 +1,28 @@ +.aspect-box { + position: relative; +} + +@supports (aspect-ratio: var(--raw-ratio)) { + .aspect-box { + aspect-ratio: var(--raw-ratio); + position: relative; + } +} + +@supports not (aspect-ratio: var(--raw-ratio)) { + .aspect-box::before { + content: ''; + width: 1px; + margin-left: -1px; + float: left; + height: 0; + padding-top: var(--ratio); + } + + .aspect-box::after { + /* to clear float */ + content: ''; + display: table; + clear: both; + } +} diff --git a/src/components/layout/aspect-box/index.tsx b/src/components/layout/aspect-box/index.tsx new file mode 100644 index 0000000..8058710 --- /dev/null +++ b/src/components/layout/aspect-box/index.tsx @@ -0,0 +1,26 @@ +import clsx from 'clsx' +import * as React from 'react' + +import s from './aspect-box.module.css' + +export const AspectBox = ({ + ratio, + children, + className, + style, + ...rest +}: { ratio: number } & JSX.IntrinsicElements['div']) => { + return ( +

+ {children} +

+ ) +} diff --git a/src/components/layout/container/container.module.scss b/src/components/layout/container/container.module.scss new file mode 100644 index 0000000..82efddb --- /dev/null +++ b/src/components/layout/container/container.module.scss @@ -0,0 +1,12 @@ +@import '~/css/helpers'; + +.container { + width: 100%; + max-width: tovw(1296px, 'default', 320px); + margin: 0 auto; + + @media screen and (max-width: 800px) { + max-width: 100%; + padding: 0 tovw(27px, 'tablet', 27px); + } +} diff --git a/src/components/layout/container/index.tsx b/src/components/layout/container/index.tsx new file mode 100644 index 0000000..d15c08e --- /dev/null +++ b/src/components/layout/container/index.tsx @@ -0,0 +1,15 @@ +import clsx from 'clsx' +import * as React from 'react' + +import s from './container.module.scss' + +export const Container = React.forwardRef< + HTMLDivElement, + JSX.IntrinsicElements['div'] +>(({ className, ...props }, ref) => { + return ( +

+ ) +}) + +export type ContainerProps = React.ComponentProps diff --git a/src/components/layout/page.tsx b/src/components/layout/page.tsx new file mode 100644 index 0000000..77959fa --- /dev/null +++ b/src/components/layout/page.tsx @@ -0,0 +1,34 @@ +import * as React from 'react' + +import { Footer } from '~/components/common/footer' +import { Header } from '~/components/common/header' +import { LocomotiveScrollProvider } from '~/lib/locomotive-scroll/provider' + +type Props = { + children?: React.ReactNode + extras?: React.ReactNode + locomotiveScroll?: boolean +} + +const ContentMemo = React.memo(({ children, extras }: Props) => { + return ( + <> + {extras} +

{children}