Add website layouts and nav menus (#400)

* merge global styles

* add logos

* add app layout

* fix fonts

* add links

* add homepage

* update repos cols

* update page footer

* add logo variants

* update links

* add feature sections

* update layouts

* add blog pages

* add learn pages

* add deps

* enable disableStaticImages in Next config

* remove logo variant

* add navigation menus

* add theme-color meta tag

* stop ignoring next-env.d.ts

* use our Link
This commit is contained in:
Pavel 2023-05-16 11:57:15 +02:00 committed by GitHub
parent 2d1524bf17
commit 8bae5fa3f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 891 additions and 103 deletions

View File

@ -33,7 +33,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
# Tamagui
.tamagui

5
apps/website/next-env.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

View File

@ -13,7 +13,7 @@ let config = {
ignoreBuildErrors: true,
},
images: {
disableStaticImages: true,
// disableStaticImages: true,
},
transpilePackages: [
// 'react-native',
@ -27,16 +27,6 @@ let config = {
legacyBrowsers: false,
// esmExternals: 'loose',
},
redirects: async () => {
return [
{
source: '/',
destination: '/insights',
permanent: false,
},
]
},
}
const plugins = [

View File

@ -13,16 +13,19 @@
},
"dependencies": {
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-navigation-menu": "^1.1.2",
"@scure/base": "^1.1.1",
"@status-im/colors": "*",
"@status-im/components": "*",
"@status-im/icons": "*",
"@status-im/js": "*",
"@status-im/colors": "*",
"@tamagui/next-theme": "1.11.1",
"class-variance-authority": "^0.6.0",
"next": "13.2.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-web": "^0.18.12"
"react-native-web": "^0.18.12",
"ts-pattern": "^4.3.0"
},
"devDependencies": {
"@achingbrain/ssdp": "^4.0.1",
@ -33,6 +36,7 @@
"autoprefixer": "^10.4.14",
"postcss": "^8.4.21",
"tailwindcss": "^3.3.1",
"tailwindcss-animate": "^1.0.5",
"typescript": "^5.0.3"
},
"engines": {

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><g clip-path="url(#a)"><mask id="b" width="32" height="33" x="0" y="-1" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M16 0C4 0 0 4 0 16s4 16 16 16 16-4 16-16S28 0 16 0Z"/></mask><g mask="url(#b)"><g filter="url(#c)"><circle cx="23" cy="9" r="19" fill="#1992D7"/></g><g filter="url(#d)"><circle cx="33" cy="19" r="19" fill="#F6B03C"/></g><g filter="url(#e)"><circle cx="5" cy="31" r="19" fill="#FF7D46"/></g><g filter="url(#f)"><circle cx="-7" cy="9" r="19" fill="#7140FD"/></g><g fill="#fff" fill-rule="evenodd" clip-rule="evenodd" filter="url(#g)"><path d="M19.656 16.862c-.26 3.263-2.603 6.148-5.776 6.329-1.949.111-3.895-1.079-4-3.01-.082-1.556.88-2.69 2.56-3.125a6.04 6.04 0 0 1 1.212-.189c1.783-.1 2.9.308 4.683.207.411-.02.82-.082 1.219-.184.032-.009.07-.018.102-.028ZM12.352 15.137c.26-3.263 2.603-6.147 5.776-6.329 1.949-.11 3.895 1.08 4 3.011.085 1.555-.88 2.69-2.56 3.125a6.04 6.04 0 0 1-1.212.189c-1.783.1-2.9-.308-4.683-.209a6.24 6.24 0 0 0-1.219.184l-.102.03Z"/></g></g></g><defs><filter id="c" width="56.861" height="56.861" x="-5.43" y="-19.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="d" width="56.861" height="56.861" x="4.57" y="-9.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="e" width="56.861" height="56.861" x="-23.43" y="2.569" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="f" width="56.861" height="56.861" x="-35.43" y="-19.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="g" width="72.456" height="74.596" x="-20.224" y="-13.271" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8.026"/><feGaussianBlur stdDeviation="15.05"/><feColorMatrix values="0 0 0 0 0.0352941 0 0 0 0 0.0627451 0 0 0 0 0.109804 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_718_92851"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_718_92851" result="shape"/></filter><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><g clip-path="url(#a)"><mask id="b" width="32" height="33" x="0" y="-1" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M16 0C4 0 0 4 0 16s4 16 16 16 16-4 16-16S28 0 16 0Z"/></mask><g mask="url(#b)"><g filter="url(#c)"><circle cx="23" cy="9" r="19" fill="#1992D7"/></g><g filter="url(#d)"><circle cx="33" cy="19" r="19" fill="#F6B03C"/></g><g filter="url(#e)"><circle cx="5" cy="31" r="19" fill="#FF7D46"/></g><g filter="url(#f)"><circle cx="-7" cy="9" r="19" fill="#7140FD"/></g><g fill="#fff" fill-rule="evenodd" clip-rule="evenodd" filter="url(#g)"><path d="M19.656 16.862c-.26 3.263-2.603 6.148-5.776 6.329-1.949.111-3.895-1.079-4-3.01-.082-1.556.88-2.69 2.56-3.125a6.04 6.04 0 0 1 1.212-.189c1.783-.1 2.9.308 4.683.207.411-.02.82-.082 1.219-.184.032-.009.07-.018.102-.028ZM12.352 15.137c.26-3.263 2.603-6.147 5.776-6.329 1.949-.11 3.895 1.08 4 3.011.085 1.555-.88 2.69-2.56 3.125a6.04 6.04 0 0 1-1.212.189c-1.783.1-2.9-.308-4.683-.209a6.24 6.24 0 0 0-1.219.184l-.102.03Z"/></g></g></g><defs><filter id="c" width="56.861" height="56.861" x="-5.43" y="-19.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="d" width="56.861" height="56.861" x="4.57" y="-9.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="e" width="56.861" height="56.861" x="-23.43" y="2.569" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="f" width="56.861" height="56.861" x="-35.43" y="-19.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92851" stdDeviation="4.715"/></filter><filter id="g" width="72.456" height="74.596" x="-20.224" y="-13.271" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8.026"/><feGaussianBlur stdDeviation="15.05"/><feColorMatrix values="0 0 0 0 0.0352941 0 0 0 0 0.0627451 0 0 0 0 0.109804 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_718_92851"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_718_92851" result="shape"/></filter><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><g clip-path="url(#a)"><mask id="b" width="32" height="32" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M16 0C4 0 0 4 0 16s4 16 16 16 16-4 16-16S28 0 16 0Z"/></mask><g mask="url(#b)"><g filter="url(#c)"><circle cx="23" cy="9" r="19" fill="#2A4AF5" fill-opacity=".4"/></g><g filter="url(#d)"><circle cx="33" cy="19" r="19" fill="#2A4AF5" fill-opacity=".4"/></g><g filter="url(#e)"><circle cx="5" cy="31" r="19" fill="#2A4AF5" fill-opacity=".4"/></g><g filter="url(#f)"><circle cx="-7" cy="9" r="19" fill="#2A4AF5" fill-opacity=".4"/></g><g stroke="#fff" stroke-width=".5" filter="url(#g)"><path d="M19.532 16.863c-.259 3.253-2.59 6.13-5.75 6.31-1.939.111-3.876-1.075-3.98-3.001-.081-1.55.876-2.682 2.547-3.116.395-.103.8-.166 1.207-.188 1.775-.1 2.886.308 4.661.207.41-.021.816-.083 1.213-.184.032-.009.07-.018.102-.028ZM12.266 15.143c.259-3.254 2.591-6.13 5.75-6.31 1.939-.111 3.876 1.075 3.98 3.001.085 1.55-.876 2.682-2.547 3.116a6 6 0 0 1-1.207.189c-1.775.1-2.886-.308-4.661-.208-.41.02-.816.082-1.213.183l-.102.03Z" clip-rule="evenodd"/><path d="M16 1C4.75 1 1 4.75 1 16s3.75 15 15 15 15-3.75 15-15S27.25 1 16 1Z" opacity=".5"/></g></g></g><defs><filter id="c" width="58" height="58" x="-6" y="-20" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92063" stdDeviation="5"/></filter><filter id="d" width="58" height="58" x="4" y="-10" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92063" stdDeviation="5"/></filter><filter id="e" width="58" height="58" x="-24" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92063" stdDeviation="5"/></filter><filter id="f" width="58" height="58" x="-36" y="-20" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_92063" stdDeviation="5"/></filter><filter id="g" width="90.5" height="90.5" x="-29.25" y="-21.25" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8"/><feGaussianBlur stdDeviation="15"/><feColorMatrix values="0 0 0 0 0.0352941 0 0 0 0 0.0627451 0 0 0 0 0.109804 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_718_92063"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_718_92063" result="shape"/></filter><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><g clip-path="url(#a)"><mask id="b" width="32" height="33" x="0" y="-1" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M16 0C4 0 0 4 0 16s4 16 16 16 16-4 16-16S28 0 16 0Z"/></mask><g mask="url(#b)"><g filter="url(#c)"><circle cx="23" cy="9" r="19" fill="#EC266C"/></g><g filter="url(#d)"><circle cx="33" cy="19" r="19" fill="#F66F8F"/></g><g filter="url(#e)"><circle cx="5" cy="31" r="19" fill="#EC266C"/></g><g filter="url(#f)"><circle cx="-7" cy="9" r="19" fill="#7140FD"/></g><g filter="url(#g)"><path fill="#fff" d="M23.787 15.315c-.223 3.894-3.781 6.765-7.792 7.085-4.01-.32-7.568-3.19-7.79-7.085-.137-2.392 1.325-4.78 3.7-4.91 1.91-.1 3.304 1.082 3.839 3.142.127.487.205.985.232 1.488.006.102.01.203.013.302.011-.096.02-.197.026-.302a7.399 7.399 0 0 1 .232-1.488c.534-2.06 1.929-3.241 3.84-3.141 2.374.129 3.836 2.517 3.7 4.909Z"/></g></g></g><defs><filter id="c" width="63.147" height="63.147" x="-8.574" y="-22.574" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_91701" stdDeviation="6.287"/></filter><filter id="d" width="63.147" height="63.147" x="1.426" y="-12.574" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_91701" stdDeviation="6.287"/></filter><filter id="e" width="63.147" height="63.147" x="-26.574" y="-.574" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_91701" stdDeviation="6.287"/></filter><filter id="f" width="63.147" height="63.147" x="-38.574" y="-22.574" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_718_91701" stdDeviation="6.287"/></filter><filter id="g" width="75.602" height="72" x="-21.805" y="-11.6" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8"/><feGaussianBlur stdDeviation="15"/><feColorMatrix values="0 0 0 0 0.0352941 0 0 0 0 0.0627451 0 0 0 0 0.109804 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_718_91701"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_718_91701" result="shape"/></filter><clipPath id="a"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,20 @@
import NextLink from 'next/link'
import type { ComponentProps } from 'react'
export const Link = (props: ComponentProps<typeof NextLink>) => {
const external =
typeof props.href === 'string'
? props.href.startsWith('http')
: Boolean(props.href.pathname?.startsWith('http'))
return (
<NextLink
{...props}
{...(external && {
target: '_blank',
rel: 'noopener noreferrer',
})}
/>
)
}

View File

@ -0,0 +1,56 @@
import Image from 'next/image'
import { useRouter } from 'next/router'
import { match, P } from 'ts-pattern'
import logoSrc from '../../public/images/logo/default.svg'
import logoDevSrc from '../../public/images/logo/dev.svg'
import logoLearnSrc from '../../public/images/logo/learn.svg'
type Props = {
label?: boolean
}
export const Logo = (props: Props) => {
const { label = true } = props
const { pathname } = useRouter()
return (
<div className="flex flex-shrink-0 items-center gap-2">
{match(pathname)
.with(
P.when(p => p.startsWith('/insights')),
() => <Image src={logoDevSrc} alt="Status logo" />
)
.with(
P.when(p => p.startsWith('/learn')),
() => <Image src={logoLearnSrc} alt="Status logo" />
)
.with(
P.when(p => p.startsWith('/blog')),
() => <Image src={logoSrc} alt="Status logo" />
)
.otherwise(() => (
<Image src={logoSrc} alt="Status logo" />
))}
{label && (
<svg
xmlns="http://www.w3.org/2000/svg"
width="70"
height="16"
fill="none"
className="mr-[10px]"
>
<path
fill="#fff"
fillRule="evenodd"
d="M19.423 13.144c.252.042 1.511.01 1.595 0V16h-1.942c-.84-.021-1.54-.09-2.26-.365a3.153 3.153 0 0 1-1.508-1.226c-.378-.632-.526-1.37-.526-2.094V5.627h-1.848V2.94h1.848V0h3.444v2.94h2.184v2.687h-2.184v6.215c0 .252.039.529.151.768a.822.822 0 0 0 .425.38c.203.077.348.123.62.154ZM7.863 8.262c1.253.256 2.188.67 2.802 1.243.305.287.545.637.702 1.025.158.388.224.809.224 1.229 0 .797-.255 1.582-.744 2.22a4.863 4.863 0 0 1-2.032 1.488c-.944.37-1.952.55-2.966.532-1.708-.002-3.066-.358-4.074-1.069a4.132 4.132 0 0 1-1.203-1.266C.266 13.161 0 12.367 0 11.8h3.517c.021.242.131.492.264.695.132.203.304.377.506.512a2.989 2.989 0 0 0 1.569.421 3.06 3.06 0 0 0 1.515-.379 1.101 1.101 0 0 0 .583-.945.995.995 0 0 0-.41-.801c-.373-.249-.804-.39-1.241-.473l-2.234-.444c-1.258-.252-2.194-.688-2.807-1.31a3.245 3.245 0 0 1-.908-2.374 3.471 3.471 0 0 1 .676-2.141 4.308 4.308 0 0 1 1.905-1.385 7.829 7.829 0 0 1 2.883-.487c1.63.002 2.912.346 3.847 1.033.456.327.838.747 1.121 1.231.283.485.49 1.41.49 1.934H8.042c-.052-.283-.201-.694-.39-.91a1.987 1.987 0 0 0-.726-.546 2.56 2.56 0 0 0-1.07-.206 2.595 2.595 0 0 0-1.39.332c-.17.088-.326.236-.426.4a1.05 1.05 0 0 0-.155.544.992.992 0 0 0 .369.78c.379.268.811.42 1.276.508l2.332.473Zm25.606-3.185a3.828 3.828 0 0 0-1.212-1.357 5.446 5.446 0 0 0-1.754-.78 8.505 8.505 0 0 0-2.062-.252c-.913 0-1.846.144-2.714.472A4.832 4.832 0 0 0 23.82 4.48c-.569.669-.996 1.521-.996 2.408H26.1c.084-.535.431-.906.795-1.165a2.712 2.712 0 0 1 1.526-.443c.501 0 1.025.14 1.428.455.17.155.302.347.388.56.086.214.136.44.122.67-.007.12-.031.297-.086.405a.877.877 0 0 1-.268.294c-.313.177-.654.256-1.014.31-.428.064-.958.119-1.64.19l-.144.014c-.616.058-1.226.164-1.825.32a5.154 5.154 0 0 0-1.548.67 3.176 3.176 0 0 0-1.075 1.182c-.279.559-.397 1.178-.397 1.798 0 .745.17 1.493.56 2.132a3.493 3.493 0 0 0 1.525 1.283 5.553 5.553 0 0 0 2.199.438 5.41 5.41 0 0 0 1.686-.26 3.78 3.78 0 0 0 1.25-.71c.342-.298.74-.663.948-1.067l.01 1.785h3.434V7.055c0-.682-.198-1.366-.505-1.978Zm-3.105 5.582c-.113 1.28-.877 2.426-2.099 2.78a2.263 2.263 0 0 1-.775.078h-.096a1.564 1.564 0 0 1-1.366-1.081c-.237-.865.257-1.612 1.302-1.962l.144-.045c.417-.117.768-.159 1.12-.201.359-.043.718-.087 1.148-.21.21-.06.411-.138.607-.234l.003.012a3.661 3.661 0 0 1 .012.863Zm11.442 2.485c.252.042 1.512.01 1.596 0V16h-1.943c-.84-.021-1.54-.09-2.26-.365a3.153 3.153 0 0 1-1.507-1.226c-.379-.632-.527-1.37-.527-2.094V5.627h-1.847V2.94h1.847V0h3.444v2.94h2.184v2.687h-2.184v6.215c0 .252.039.529.151.768a.822.822 0 0 0 .426.38c.202.077.347.123.62.154ZM52.893 2.94v7.39c0 .505-.1 1.01-.346 1.454a2.3 2.3 0 0 1-.91.884 2.548 2.548 0 0 1-1.208.3 2.09 2.09 0 0 1-1.628-.664 2.6 2.6 0 0 1-.612-1.806V2.94h-3.444v8.189c0 .892.174 1.796.56 2.607a4 4 0 0 0 1.53 1.668c.69.402 1.48.596 2.278.596.86 0 1.73-.22 2.461-.695a3.855 3.855 0 0 0 1.465-1.825v2.268h3.297V2.94h-3.444Zm12.65 5.322c1.253.256 2.188.67 2.802 1.243.305.287.544.637.702 1.025.158.388.224.809.224 1.229 0 .797-.255 1.582-.744 2.22a4.863 4.863 0 0 1-2.032 1.488c-.945.37-1.952.55-2.966.532-1.708-.002-3.066-.358-4.074-1.069a4.132 4.132 0 0 1-1.203-1.266c-.306-.503-.572-1.297-.572-1.864h3.517c.021.242.131.492.264.695.132.203.304.377.506.512a2.989 2.989 0 0 0 1.569.421 3.06 3.06 0 0 0 1.515-.379 1.102 1.102 0 0 0 .583-.945.994.994 0 0 0-.41-.801c-.374-.249-.804-.39-1.242-.473l-2.233-.444c-1.259-.252-2.194-.688-2.807-1.31a3.245 3.245 0 0 1-.908-2.374 3.472 3.472 0 0 1 .676-2.141 4.308 4.308 0 0 1 1.905-1.385 7.829 7.829 0 0 1 2.883-.487c1.63.002 2.911.346 3.847 1.033.456.327.838.747 1.121 1.231.283.485.49 1.41.49 1.934h-3.234c-.052-.283-.201-.694-.39-.91a1.988 1.988 0 0 0-.726-.546 2.56 2.56 0 0 0-1.07-.206 2.595 2.595 0 0 0-1.39.332c-.17.088-.326.236-.426.4-.1.164-.154.352-.155.544a.991.991 0 0 0 .369.78c.379.268.811.42 1.276.508l2.332.473Z"
clipRule="evenodd"
/>
</svg>
)}
</div>
)
}
export type { Props as LogoProps }

View File

@ -0,0 +1,100 @@
import { useEffect, useRef, useState } from 'react'
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
import { Button, Text } from '@status-im/components'
import { DownloadIcon, ExternalIcon } from '@status-im/icons'
import { cx } from 'class-variance-authority'
import { LINKS } from '@/config/links'
import { Link } from './link'
import { Logo } from './logo'
export const NavMenu = () => {
const [visible, setVisible] = useState(false)
// Using ref to prevent re-running of useEffect
const visibleRef = useRef(visible)
visibleRef.current = visible
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 60) {
visibleRef.current === false && setVisible(true)
} else {
visibleRef.current === true && setVisible(false)
}
}
handleScroll()
window.addEventListener('scroll', handleScroll, { passive: true })
return () => {
window.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<NavigationMenu.Root
data-visible={visible}
className={cx([
'fixed left-1/2 top-5 z-10 min-w-[746px] -translate-x-1/2 overflow-hidden',
'bg-blur-neutral-80/80 border-neutral-80/5 rounded-2xl border backdrop-blur-md',
'data-[visible=false]:pointer-events-none',
'opacity-0 transition-opacity data-[visible=true]:opacity-100',
])}
>
<div className="flex items-center p-2">
<Logo label={false} />
<NavigationMenu.List className="flex items-center pl-5">
{Object.entries(LINKS).map(([name, links]) => (
<NavigationMenu.Item key={name}>
<NavigationMenu.Trigger className="pr-5 aria-expanded:opacity-50">
<Text size={15} weight="medium" color="$white-100">
{name}
</Text>
</NavigationMenu.Trigger>
<NavigationMenu.Content
className={cx([
'grid gap-3 pb-12 pl-[60px] pt-6',
'data-[state=open]:animate-in',
'data-[state=closed]:animate-out fade-out-20',
])}
>
{links.map(link => {
const external = link.href.startsWith('http')
return (
<NavigationMenu.Link key={link.name} asChild>
<Link
href={link.href}
className="flex items-center gap-1"
>
<Text size={27} weight="semibold" color="$white-100">
{link.name}
</Text>
{external && (
<ExternalIcon size={20} color="$white-100" />
)}
</Link>
</NavigationMenu.Link>
)
})}
</NavigationMenu.Content>
</NavigationMenu.Item>
))}
</NavigationMenu.List>
<Button size={32} icon={<DownloadIcon size={20} />}>
Get Status
</Button>
</div>
<NavigationMenu.Viewport
className={cx([
'data-[state=open]:animate-heightIn data-[state=closed]:animate-heightOut',
'transition-height h-[var(--radix-navigation-menu-viewport-height)]',
])}
/>
</NavigationMenu.Root>
)
}

View File

@ -0,0 +1,135 @@
import { Button, Text } from '@status-im/components'
import Link from 'next/link'
import { LINKS, SOCIALS } from '@/config/links'
import { Logo } from './logo'
import type { Links } from '@/config/links'
export const PageFooter = () => {
return (
<footer className="px-6 pb-3 pt-14">
<div className="mb-6">
<Logo />
</div>
<div className="mb-10 grid grid-cols-2 lg:grid-cols-8">
{Object.entries(LINKS).map(([title, links]) => (
<Section key={title} title={title} links={links} />
))}
<div>
<Text size={13} color="$neutral-50">
{"Let's connect"}
</Text>
<div className="flex flex-col">
{Object.values(SOCIALS).map(social => (
<Text size={11} key={social.name}>
{social.name}
</Text>
))}
</div>
</div>
</div>
<div className="mb-4 grid gap-5 lg:grid-cols-[2fr_1fr]">
<ActionCard
title="Own a community?"
description="Don't give Discord and Telegram power over your community"
action="Take back control"
/>
<ActionCard
title="Give us feedback!"
description="Tell us how to make it better"
action="Upvote"
/>
</div>
<div className="flex items-center gap-2">
<Text size={11} color="$neutral-50">
© Status Research & Development GmbH
</Text>
<span>
<svg
width="2"
height="2"
viewBox="0 0 2 2"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="1" cy="1" r="1" fill="#647084" />
</svg>
</span>
<div className="flex gap-3">
<Text size={11} color="$neutral-40">
Terms of use
</Text>
<Text size={11} color="$neutral-40">
Privacy policy
</Text>
<Text size={11} color="$neutral-40">
Cookies
</Text>
</div>
</div>
</footer>
)
}
type SectionProps = {
title: string
links: Links
}
const Section = (props: SectionProps) => {
const { title, links } = props
return (
<div>
<div className="grid gap-3">
<Text size={13} color="$neutral-50">
{title}
</Text>
<ul className="grid gap-1">
{links.map(link => (
<li key={link.name}>
<Link href={link.href}>
<Text size={15} color="$white-100" weight="medium">
{link.name}
</Text>
</Link>
</li>
))}
</ul>
</div>
</div>
)
}
type ActionCardProps = {
title: string
description: string
action: string
}
const ActionCard = (props: ActionCardProps) => {
const { title, description, action } = props
return (
<div className="bg-netural-95 border-neutral-90 flex items-center rounded-[20px] border px-5 py-3">
<div className="grid flex-1 gap-px">
<Text size={19} color="$white-100" weight="semibold">
{title}
</Text>
<Text size={15} color="$white-100">
{description}
</Text>
</div>
<Button size={32} variant="darkGrey">
{action}
</Button>
</div>
)
}

View File

@ -0,0 +1,67 @@
export const LINKS = {
Features: [
{ name: 'Communities', href: '/features/communities' },
{ name: 'Messenger', href: '/features/messenger' },
{ name: 'Wallet', href: '/features/wallet' },
{ name: 'Browser', href: '/features/browser' },
],
Platforms: [
{ name: 'Mobile', href: '/platforms/mobile' },
{ name: 'Desktop', href: '/platforms/desktop' },
{ name: 'Web', href: '/platforms/web' },
],
About: [
{ name: 'Mission', href: '/' },
{ name: 'Principles', href: '/' },
{ name: 'Team', href: '/' },
{ name: 'Partners', href: '/' },
{ name: 'Press Kit', href: '/' },
],
Learn: [
{ name: 'Getting Started', href: '/learn/' },
{ name: 'Using Status', href: '/learn/' },
{ name: 'Communities', href: '/learn/' },
{ name: 'Wallet', href: '/learn/' },
{ name: 'Profile', href: '/learn/' },
],
Collaborate: [
{ name: 'Discuss', href: '/' },
{ name: 'Feature upvote', href: '/' },
{ name: 'Blog', href: '/blog' },
{ name: 'Translations', href: '/' },
{ name: 'Community groups', href: '/' },
{ name: 'Jobs', href: '/' },
],
Developers: [
{ name: 'Repos', href: 'https://github.com/status-im' },
{ name: 'Insights', href: '/insights' },
{ name: 'Integrations', href: '/' },
],
SNT: [
{ name: 'Token', href: '/' },
{ name: 'Governance', href: '/' },
{ name: 'Curate', href: '/' },
{ name: 'Exchanges', href: '/' },
],
} as const
export const SOCIALS = {
status: {
name: 'Status',
href: '<TODO>',
},
twitter: {
name: 'Twitter',
href: 'https://twitter.com/ethstatus',
},
github: {
name: 'GitHub',
href: 'https://github.com/status-im',
},
youtube: {
name: 'YouTube',
href: 'https://youtube.com/<TODO>',
},
}
export type Links = (typeof LINKS)[keyof typeof LINKS]

View File

@ -0,0 +1,99 @@
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
import { Button, Text } from '@status-im/components'
import { DownloadIcon, ExternalIcon } from '@status-im/icons'
import { cx } from 'class-variance-authority'
import { Logo } from '@/components/logo'
import { NavMenu } from '@/components/nav-menu'
import { PageFooter } from '@/components/page-footer'
import { LINKS } from '@/config/links'
import { Link } from '../components/link'
import type { PageLayout } from 'next'
export const AppLayout: PageLayout = page => {
return (
<>
<NavMenu />
<div className="min-h-full bg-neutral-100">
<NavigationMenu.Root>
<div className="flex items-center px-6">
<div className="mr-5">
<Link href="/">
<Logo />
</Link>
</div>
<div className="flex-1">
<NavigationMenu.List className="flex items-center">
{Object.entries(LINKS).map(([name, links]) => (
<NavigationMenu.Item key={name}>
<NavigationMenu.Trigger className="py-4 pr-5 aria-expanded:opacity-50">
<Text size={15} weight="medium" color="$white-100">
{name}
</Text>
</NavigationMenu.Trigger>
<NavigationMenu.Content className="grid gap-3 pb-8 pl-[164px] pt-3">
{links.map(link => {
const external = link.href.startsWith('http')
return (
<NavigationMenu.Link key={link.name} asChild>
<Link
href={link.href}
className="flex items-center gap-1"
>
<Text
size={27}
weight="semibold"
color="$white-100"
>
{link.name}
</Text>
{external && (
<ExternalIcon size={20} color="$white-100" />
)}
</Link>
</NavigationMenu.Link>
)
})}
</NavigationMenu.Content>
</NavigationMenu.Item>
))}
</NavigationMenu.List>
</div>
<div className="flex justify-end">
<Button
size={32}
variant="darkGrey"
icon={<DownloadIcon size={20} />}
>
Sign up for early access
</Button>
</div>
</div>
<NavigationMenu.Viewport
className={cx([
'data-[state=open]:animate-heightIn data-[state=closed]:animate-heightOut',
'transition-height h-[var(--radix-navigation-menu-viewport-height)]',
// 'data-[state=open]:animate-heightIn animate-',
// 'data-[state=closed]:animate-heightOut',
// 'transition-height h-[var(--radix-navigation-menu-viewport-height)]',
// 'transition-height mb-8 h-[var(--radix-navigation-menu-viewport-height)] duration-1000',
// 'h-[var(--radix-navigation-menu-viewport-height)]',
// 'data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[6px] bg-white transition-[width,height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]',
])}
/>
</NavigationMenu.Root>
{/* ROUNDED WHITE BG */}
{/* <div className="bg-white-100 mx-1 min-h-[900px] rounded-3xl">{page}</div> */}
{page}
<PageFooter />
</div>
</>
)
}

View File

@ -1,33 +1,24 @@
import { Button, Text } from '@status-im/components'
import { LockedIcon, StatusIcon } from '@status-im/icons'
import Link from 'next/link'
import { Text } from '@status-im/components'
import { useRouter } from 'next/router'
import { Link } from '@/components/link'
import { AppLayout } from './app-layout'
import type { PageLayout } from 'next'
import type { LinkProps } from 'next/link'
export const InsightsLayout: PageLayout = page => {
return (
<>
<div className="sticky top-0 z-10 grid grid-cols-3 items-center px-4 py-3 backdrop-blur-sm">
<StatusIcon size={20} />
<nav className="flex flex-1 justify-center gap-3">
<NavLink href="/insights">Epics</NavLink>
<NavLink href="/insights/detail">Detail</NavLink>
<NavLink href="/insights/orphans">Orphans</NavLink>
<NavLink href="/insights/repos">Repos</NavLink>
</nav>
<div className="flex justify-end">
<Button size={32} variant="outline" icon={<LockedIcon size={20} />}>
Log in
</Button>
</div>
</div>
<div className="px-6 py-4 pb-10">{page}</div>
</>
return AppLayout(
<div className="bg-white-100 mx-1 grid min-h-[calc(100vh-56px-4px)] grid-cols-[320px_1fr] items-stretch rounded-3xl">
<aside className="border-neutral-10 flex flex-col gap-3 border-r p-5">
<NavLink href="/insights">Epics</NavLink>
<NavLink href="/insights/detail">Detail</NavLink>
<NavLink href="/insights/orphans">Orphans</NavLink>
<NavLink href="/insights/repos">Repos</NavLink>
</aside>
<main className="p-10">{page}</main>
</div>
)
}
@ -38,13 +29,12 @@ const NavLink = (props: LinkProps & { children: string }) => {
const active = asPath === props.href
return (
<Link
className={`flex h-8 items-center rounded-[10px] px-3 ${
active && 'bg-neutral-10 '
}`}
{...linkProps}
>
<Text size={15} weight="medium">
<Link className="transition-opacity hover:opacity-50" {...linkProps}>
<Text
size={19}
weight="medium"
color={active ? '$neutral-50' : '$neutral-100'}
>
{children}
</Text>
</Link>

View File

@ -1,5 +1,4 @@
import '@/styles/app.css'
import '@/styles/reset.css'
import '@/styles/global.css'
import { Provider } from '@status-im/components'
import { Inter } from 'next/font/google'
@ -8,8 +7,8 @@ import type { Page, PageLayout } from 'next'
import type { AppProps } from 'next/app'
const inter = Inter({
variable: '--font-sans',
weight: ['400', '500', '600'],
variable: '--font-inter',
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
})
@ -21,7 +20,7 @@ export default function App({ Component, pageProps }: Props) {
const getLayout: PageLayout = Component.getLayout || (page => page)
return (
<div id="app" className={inter.variable}>
<div id="app" className={inter.variable + ' font-sans'}>
<Provider>{getLayout(<Component {...pageProps} />)}</Provider>
</div>
)

View File

@ -29,6 +29,7 @@ export default class Document extends NextDocument {
id="tamagui"
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
/>
<meta name="theme-color" content="#09101C" />
</Head>
<body>
<Main />

View File

@ -0,0 +1,15 @@
import { AppLayout } from '@/layouts/app-layout'
import type { Page } from 'next'
const BlogDetailPage: Page = () => {
return (
<div>
<h1>Blog</h1>
</div>
)
}
BlogDetailPage.getLayout = AppLayout
export default BlogDetailPage

View File

@ -0,0 +1,68 @@
import { Button, Shadow, Tag, Text } from '@status-im/components'
import { AppLayout } from '@/layouts/app-layout'
import type { Page } from 'next'
const BlogPage: Page = () => {
return (
<div className="bg-white-100 mx-1 min-h-[900px] rounded-3xl">
<div className="mx-auto max-w-[1184px] py-32">
<div className="grid gap-2">
<h1 className="text-7xl font-bold">Blog</h1>
<Text size={19}>Long form articles, thoughts, and ideas.</Text>
</div>
<div>
<div className="mt-16 grid grid-cols-3 gap-5">
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(v => (
<PostCard key={v} />
))}
</div>
</div>
<div className="flex justify-center pt-8">
<Button variant="outline">Load more posts</Button>
</div>
</div>
</div>
)
}
const PostCard = () => {
return (
<Shadow className="border-neutral-5 rounded-[20px] border">
<div className="flex flex-col gap-2 p-4">
<div className="self-start">
<Tag size={24} label="Updates" />
</div>
<Text size={19} weight="semibold">
Long form articles, thoughts, and ideas.
</Text>
<div className="flex gap-1">
<Text size={15} weight="semibold">
Status
</Text>
<Text size={15} color="$neutral-50">
on Jul 12, 2022
</Text>
</div>
</div>
<div className="px-2 pb-2">
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img
className="rounded-2xl"
style={{
aspectRatio: '366/206',
objectFit: 'cover',
}}
src="https://images.unsplash.com/photo-1683053243792-28e9d984c25a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80"
/>
</div>
</Shadow>
)
}
BlogPage.getLayout = AppLayout
export default BlogPage

View File

@ -0,0 +1,130 @@
import { Button, Text } from '@status-im/components'
import { DownloadIcon, PlayIcon } from '@status-im/icons'
import { AppLayout } from '@/layouts/app-layout'
import type { Page } from 'next'
const HomePage: Page = () => {
return (
<>
<div className="bg-white-100 mx-1 rounded-3xl py-32">
<div className="mx-40 mb-40 grid gap-8">
<div className="grid gap-6">
<h1 className="text-7xl font-bold">
Make the
<br />
jump to web3
</h1>
<Text size={19}>
An open source, decentralized communication super app
</Text>
</div>
<div className="grid gap-4">
<div className="flex gap-3">
<Button size={40} icon={<DownloadIcon size={20} />}>
Get Status
</Button>
<Button size={40} variant="outline" icon={<PlayIcon size={20} />}>
Watch Video
</Button>
</div>
<Text size={11} color="$neutral-50">
Avaliable for Mac, Windows, Linux, iOS & Android
</Text>
</div>
</div>
<FeatureSection
title={`Discover your \n community`}
description="Join self-sovereign decentralized communities and start chatting."
/>
</div>
<div className="text-center">
<h2 className="text-white-100 text-4xl">
Own a community? Time to take back control!
</h2>
<Text size={19} color="$white-100">
{"Don't give Discord and Telegram power over your community."}
</Text>
</div>
<div className="bg-white-100 mx-1 space-y-[200px] rounded-3xl py-32">
<FeatureSection
title={`Chat privately\nwith friends`}
description="Protect your right to free speech with e2e encryption & metadata privacy."
/>
<FeatureSection
title={`Own your\ncrypto`}
description="Own your keys to safely send and manage your assets and collectibles."
/>
<FeatureSection
title={`Explore the\nworld of web3`}
description="Browse decentralized exchanges, marketplaces, and social networks"
/>
<FeatureGrid />
</div>
</>
)
}
type FeatureSectionProps = {
title: string
description: string
}
const FeatureSection = ({ title, description }: FeatureSectionProps) => {
return (
<section className="px-10">
<div className="mb-24 flex justify-between">
<h2 className="flex-1 whitespace-pre-line text-6xl font-bold">
{title}
</h2>
<div className="flex flex-col gap-4">
<Text size={27}>{description}</Text>
<Text size={27} weight="medium">
Learn More
</Text>
</div>
</div>
<FeatureGrid />
</section>
)
}
const FeatureGrid = () => {
return (
<div className="grid h-[800px] grid-cols-3 grid-rows-2 gap-5">
<div className="border-neutral-80/5 row-span-2 rounded-[32px] border">
<Text size={27} weight="semibold">
Title
</Text>
</div>
<div className="border-neutral-80/5 rounded-[32px] border">
<Text size={27} weight="semibold">
Title
</Text>
</div>
<div className="border-neutral-80/5 row-span-2 rounded-[32px] border">
<Text size={27} weight="semibold">
Title
</Text>
</div>
<div className="border-neutral-80/5 rounded-[32px] border">
<Text size={27} weight="semibold">
Title
</Text>
</div>
</div>
)
}
HomePage.getLayout = AppLayout
export default HomePage

View File

@ -1,6 +1,6 @@
import { Text } from '@status-im/components'
import Link from 'next/link'
import { Link } from '@/components/link'
import { InsightsLayout } from '@/layouts/insights-layout'
import type { Page } from 'next'
@ -53,14 +53,12 @@ const ReposPage: Page = () => {
</Text>
</div>
<div className="grid grid-cols-4 gap-6">
<div className="grid grid-cols-3 gap-5">
{repos.map(repo => (
<Link
key={repo.name}
href={`https://github.com/status-im/${repo.name}`}
className="border-neutral-10 hover:border-neutral-40 flex flex-col rounded-2xl border px-4 py-3 transition-colors duration-200"
target="_blank"
rel="noopener noreferrer"
className="border-neutral-10 hover:border-neutral-40 flex h-[124px] flex-col rounded-2xl border px-4 py-3 transition-colors duration-200"
>
<Text size={15} weight="semibold">
{repo.name}

View File

@ -0,0 +1,15 @@
import { AppLayout } from '@/layouts/app-layout'
import type { Page } from 'next'
const BlogDetailPage: Page = () => {
return (
<div>
<h1>Blog</h1>
</div>
)
}
BlogDetailPage.getLayout = AppLayout
export default BlogDetailPage

View File

@ -0,0 +1,15 @@
import { AppLayout } from '@/layouts/app-layout'
import type { Page } from 'next'
const LearnPage: Page = () => {
return (
<div>
<h1>Learn</h1>
</div>
)
}
LearnPage.getLayout = AppLayout
export default LearnPage

View File

@ -1,23 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
#__next {
height: 100%;
overscroll-behavior: none;
user-select: none;
color: #000;
}
*::selection {
color: #fff;
background: hsla(229, 71%, 57%, 1);
}
#app {
position: relative;
isolation: isolate;
height: 100%;
}

View File

@ -1,3 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply !bg-neutral-100;
}
}
/*
1. Use a more-intuitive box-sizing model.
*/
@ -8,12 +18,7 @@
}
:root {
font-family: var(--font-sans);
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
/* color-scheme: light dark; */
/* color: rgba(255, 255, 255, 0.87); */
/* background-color: #fff; */
@ -35,12 +40,16 @@
3. Allow percentage-based heights in the application
*/
html,
body {
body,
#__next,
#app {
width: 100vw;
min-height: 100%;
min-height: 100vh;
/* overflow: hidden; */
overscroll-behavior-y: none; /* not working on Safari */
user-select: none;
}
/*
Typographic tweaks!
4. Add accessible line-height
@ -52,6 +61,7 @@ body {
padding: 0;
-webkit-overflow-scrolling: touch;
}
/*
6. Improve media defaults
*/
@ -63,6 +73,7 @@ svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
@ -73,6 +84,7 @@ select {
font: inherit;
all: unset;
}
/*
8. Avoid text overflows
*/
@ -88,7 +100,6 @@ h6 {
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}

View File

@ -1,5 +1,8 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable @typescript-eslint/no-var-requires */
const { fontFamily } = require('tailwindcss/defaultTheme')
const colors = require('@status-im/colors')
const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
module.exports = {
@ -9,20 +12,51 @@ module.exports = {
],
theme: {
fontFamily: {
sans: ['var(--font-inter)'],
sans: ['var(--font-inter)', ...fontFamily.sans],
},
colors,
// use <Text /> from @status-im/components
fontSize: {},
// use <Text /> from @status-im/components or arbitrary values
// fontSize: {},
fontWeight: {
// regular: '400',
// medium: '500',
// semibold: '600',
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
},
extend: {},
},
extend: {
transitionProperty: {
height: 'height',
},
plugins: [],
keyframes: {
heightIn: {
from: { height: 0 },
// to: { height: 296 },
to: { height: 'var(--radix-navigation-menu-viewport-height)' },
},
heightOut: {
from: { height: 'var(--radix-navigation-menu-viewport-height)' },
// from: { height: 296 },
to: { height: 0 },
},
},
},
animation: {
heightIn: 'heightIn 250ms ease',
heightOut: 'heightOut 250ms ease',
},
},
plugins: [
require('tailwindcss-animate'),
plugin(({ matchUtilities }) => {
matchUtilities({
perspective: value => ({
perspective: value,
}),
})
}),
],
}

View File

@ -51,8 +51,8 @@
"husky": "^8.0.3",
"lint-staged": "^13.2.0",
"patch-package": "^6.5.1",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.7",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.2.8",
"rimraf": "^4.4.1",
"turbo": "^1.8.8",
"typescript": "^5.0.3",

View File

@ -3938,6 +3938,27 @@
aria-hidden "^1.1.1"
react-remove-scroll "2.5.5"
"@radix-ui/react-navigation-menu@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.2.tgz#ca5ee35ddbc4e57a9403be92f9573435173e35c8"
integrity sha512-1fSjOAGTThYSgJ5pENG2V8we7+6KDbfbiyt66HmLTeo0W3PAmmciclm0o97VlcVZW7q5Vg2hN7Cbj4XKo5u2sw==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "1.0.0"
"@radix-ui/react-collection" "1.0.2"
"@radix-ui/react-compose-refs" "1.0.0"
"@radix-ui/react-context" "1.0.0"
"@radix-ui/react-direction" "1.0.0"
"@radix-ui/react-dismissable-layer" "1.0.3"
"@radix-ui/react-id" "1.0.0"
"@radix-ui/react-presence" "1.0.0"
"@radix-ui/react-primitive" "1.0.2"
"@radix-ui/react-use-callback-ref" "1.0.0"
"@radix-ui/react-use-controllable-state" "1.0.0"
"@radix-ui/react-use-layout-effect" "1.0.0"
"@radix-ui/react-use-previous" "1.0.0"
"@radix-ui/react-visually-hidden" "1.0.2"
"@radix-ui/react-popover@^1.0.5":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.5.tgz#9c58100ed6809eb611c0acbf032f9ab58c0b55d1"
@ -4124,6 +4145,13 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-previous@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-previous@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
@ -8392,6 +8420,13 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
class-variance-authority@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.6.0.tgz#d10df1ee148bb8efc11c17909ef1567abdc85a03"
integrity sha512-qdRDgfjx3GRb9fpwpSvn+YaidnT7IUJNe4wt5/SWwM+PmUwJUhQRk/8zAyNro0PmVfmen2635UboTjIBXXxy5A==
dependencies:
clsx "1.2.1"
clean-css@^5.2.2:
version "5.3.2"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224"
@ -8502,6 +8537,11 @@ clone@^2.1.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
clsx@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
collection-visit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@ -14276,6 +14316,7 @@ node-fetch-native@^1.0.1:
node-fetch@2.6.7, node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
version "2.6.7"
uid "1b5d62978f2ed07b99444f64f0df39f960a6d34d"
resolved "https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz#1b5d62978f2ed07b99444f64f0df39f960a6d34d"
node-forge@^1.1.0, node-forge@^1.2.1, node-forge@^1.3.1:
@ -15198,10 +15239,10 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
prettier-plugin-tailwindcss@^0.2.7:
version "0.2.7"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.7.tgz#2314d728cce9c9699ced41a01253eb48b4218da5"
integrity sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==
prettier-plugin-tailwindcss@^0.2.8:
version "0.2.8"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.8.tgz#e9c0356680331f909a86fefe8fc2b247c21e23a2"
integrity sha512-KgPcEnJeIijlMjsA6WwYgRs5rh3/q76oInqtMXBA/EMcamrcYJpyhtRhyX1ayT9hnHlHTuO8sIifHF10WuSDKg==
prettier@^1.19.1:
version "1.19.1"
@ -15218,6 +15259,11 @@ prettier@^2.8.7:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
prettier@^2.8.8:
version "2.8.8"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
pretty-bytes@5.6.0:
version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@ -17173,6 +17219,11 @@ tabbable@^6.0.1:
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.0.1.tgz#427a09b13c83ae41eed3e88abb76a4af28bde1a6"
integrity sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==
tailwindcss-animate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.5.tgz#a6720e3b0616e1ff922b32846729881c626a069d"
integrity sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==
tailwindcss@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
@ -17569,6 +17620,11 @@ ts-interface-checker@^0.1.9:
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
ts-pattern@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/ts-pattern/-/ts-pattern-4.3.0.tgz#7a995b39342f1b00d1507c2d2f3b90ea16e178a6"
integrity sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==
tsconfig-paths@^3.14.1:
version "3.14.2"
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"