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
GitHub
parent
2d1524bf17
commit
8bae5fa3f5
|
|
@ -33,7 +33,6 @@ yarn-error.log*
|
||||||
|
|
||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
|
||||||
|
|
||||||
# Tamagui
|
# Tamagui
|
||||||
.tamagui
|
.tamagui
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
@ -13,7 +13,7 @@ let config = {
|
||||||
ignoreBuildErrors: true,
|
ignoreBuildErrors: true,
|
||||||
},
|
},
|
||||||
images: {
|
images: {
|
||||||
disableStaticImages: true,
|
// disableStaticImages: true,
|
||||||
},
|
},
|
||||||
transpilePackages: [
|
transpilePackages: [
|
||||||
// 'react-native',
|
// 'react-native',
|
||||||
|
|
@ -27,16 +27,6 @@ let config = {
|
||||||
legacyBrowsers: false,
|
legacyBrowsers: false,
|
||||||
// esmExternals: 'loose',
|
// esmExternals: 'loose',
|
||||||
},
|
},
|
||||||
|
|
||||||
redirects: async () => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
source: '/',
|
|
||||||
destination: '/insights',
|
|
||||||
permanent: false,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const plugins = [
|
const plugins = [
|
||||||
|
|
|
||||||
|
|
@ -13,16 +13,19 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-dialog": "^1.0.3",
|
"@radix-ui/react-dialog": "^1.0.3",
|
||||||
|
"@radix-ui/react-navigation-menu": "^1.1.2",
|
||||||
"@scure/base": "^1.1.1",
|
"@scure/base": "^1.1.1",
|
||||||
|
"@status-im/colors": "*",
|
||||||
"@status-im/components": "*",
|
"@status-im/components": "*",
|
||||||
"@status-im/icons": "*",
|
"@status-im/icons": "*",
|
||||||
"@status-im/js": "*",
|
"@status-im/js": "*",
|
||||||
"@status-im/colors": "*",
|
|
||||||
"@tamagui/next-theme": "1.11.1",
|
"@tamagui/next-theme": "1.11.1",
|
||||||
|
"class-variance-authority": "^0.6.0",
|
||||||
"next": "13.2.4",
|
"next": "13.2.4",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@achingbrain/ssdp": "^4.0.1",
|
"@achingbrain/ssdp": "^4.0.1",
|
||||||
|
|
@ -33,6 +36,7 @@
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
"tailwindcss": "^3.3.1",
|
"tailwindcss": "^3.3.1",
|
||||||
|
"tailwindcss-animate": "^1.0.5",
|
||||||
"typescript": "^5.0.3"
|
"typescript": "^5.0.3"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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]
|
||||||
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,33 +1,24 @@
|
||||||
import { Button, Text } from '@status-im/components'
|
import { Text } from '@status-im/components'
|
||||||
import { LockedIcon, StatusIcon } from '@status-im/icons'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
|
import { Link } from '@/components/link'
|
||||||
|
|
||||||
|
import { AppLayout } from './app-layout'
|
||||||
|
|
||||||
import type { PageLayout } from 'next'
|
import type { PageLayout } from 'next'
|
||||||
import type { LinkProps } from 'next/link'
|
import type { LinkProps } from 'next/link'
|
||||||
|
|
||||||
export const InsightsLayout: PageLayout = page => {
|
export const InsightsLayout: PageLayout = page => {
|
||||||
return (
|
return AppLayout(
|
||||||
<>
|
<div className="bg-white-100 mx-1 grid min-h-[calc(100vh-56px-4px)] grid-cols-[320px_1fr] items-stretch rounded-3xl">
|
||||||
<div className="sticky top-0 z-10 grid grid-cols-3 items-center px-4 py-3 backdrop-blur-sm">
|
<aside className="border-neutral-10 flex flex-col gap-3 border-r p-5">
|
||||||
<StatusIcon size={20} />
|
|
||||||
|
|
||||||
<nav className="flex flex-1 justify-center gap-3">
|
|
||||||
<NavLink href="/insights">Epics</NavLink>
|
<NavLink href="/insights">Epics</NavLink>
|
||||||
<NavLink href="/insights/detail">Detail</NavLink>
|
<NavLink href="/insights/detail">Detail</NavLink>
|
||||||
<NavLink href="/insights/orphans">Orphans</NavLink>
|
<NavLink href="/insights/orphans">Orphans</NavLink>
|
||||||
<NavLink href="/insights/repos">Repos</NavLink>
|
<NavLink href="/insights/repos">Repos</NavLink>
|
||||||
</nav>
|
</aside>
|
||||||
|
<main className="p-10">{page}</main>
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button size={32} variant="outline" icon={<LockedIcon size={20} />}>
|
|
||||||
Log in
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="px-6 py-4 pb-10">{page}</div>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -38,13 +29,12 @@ const NavLink = (props: LinkProps & { children: string }) => {
|
||||||
const active = asPath === props.href
|
const active = asPath === props.href
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link className="transition-opacity hover:opacity-50" {...linkProps}>
|
||||||
className={`flex h-8 items-center rounded-[10px] px-3 ${
|
<Text
|
||||||
active && 'bg-neutral-10 '
|
size={19}
|
||||||
}`}
|
weight="medium"
|
||||||
{...linkProps}
|
color={active ? '$neutral-50' : '$neutral-100'}
|
||||||
>
|
>
|
||||||
<Text size={15} weight="medium">
|
|
||||||
{children}
|
{children}
|
||||||
</Text>
|
</Text>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import '@/styles/app.css'
|
import '@/styles/global.css'
|
||||||
import '@/styles/reset.css'
|
|
||||||
|
|
||||||
import { Provider } from '@status-im/components'
|
import { Provider } from '@status-im/components'
|
||||||
import { Inter } from 'next/font/google'
|
import { Inter } from 'next/font/google'
|
||||||
|
|
@ -8,8 +7,8 @@ import type { Page, PageLayout } from 'next'
|
||||||
import type { AppProps } from 'next/app'
|
import type { AppProps } from 'next/app'
|
||||||
|
|
||||||
const inter = Inter({
|
const inter = Inter({
|
||||||
variable: '--font-sans',
|
variable: '--font-inter',
|
||||||
weight: ['400', '500', '600'],
|
weight: ['400', '500', '600', '700'],
|
||||||
subsets: ['latin'],
|
subsets: ['latin'],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -21,7 +20,7 @@ export default function App({ Component, pageProps }: Props) {
|
||||||
const getLayout: PageLayout = Component.getLayout || (page => page)
|
const getLayout: PageLayout = Component.getLayout || (page => page)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="app" className={inter.variable}>
|
<div id="app" className={inter.variable + ' font-sans'}>
|
||||||
<Provider>{getLayout(<Component {...pageProps} />)}</Provider>
|
<Provider>{getLayout(<Component {...pageProps} />)}</Provider>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@ export default class Document extends NextDocument {
|
||||||
id="tamagui"
|
id="tamagui"
|
||||||
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||||
/>
|
/>
|
||||||
|
<meta name="theme-color" content="#09101C" />
|
||||||
</Head>
|
</Head>
|
||||||
<body>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { Text } from '@status-im/components'
|
import { Text } from '@status-im/components'
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
|
import { Link } from '@/components/link'
|
||||||
import { InsightsLayout } from '@/layouts/insights-layout'
|
import { InsightsLayout } from '@/layouts/insights-layout'
|
||||||
|
|
||||||
import type { Page } from 'next'
|
import type { Page } from 'next'
|
||||||
|
|
@ -53,14 +53,12 @@ const ReposPage: Page = () => {
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-4 gap-6">
|
<div className="grid grid-cols-3 gap-5">
|
||||||
{repos.map(repo => (
|
{repos.map(repo => (
|
||||||
<Link
|
<Link
|
||||||
key={repo.name}
|
key={repo.name}
|
||||||
href={`https://github.com/status-im/${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"
|
className="border-neutral-10 hover:border-neutral-40 flex h-[124px] flex-col rounded-2xl border px-4 py-3 transition-colors duration-200"
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
>
|
||||||
<Text size={15} weight="semibold">
|
<Text size={15} weight="semibold">
|
||||||
{repo.name}
|
{repo.name}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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%;
|
|
||||||
}
|
|
||||||
|
|
@ -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.
|
1. Use a more-intuitive box-sizing model.
|
||||||
*/
|
*/
|
||||||
|
|
@ -8,12 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: var(--font-sans);
|
/* color-scheme: light dark; */
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
/* color: rgba(255, 255, 255, 0.87); */
|
/* color: rgba(255, 255, 255, 0.87); */
|
||||||
/* background-color: #fff; */
|
/* background-color: #fff; */
|
||||||
|
|
||||||
|
|
@ -35,12 +40,16 @@
|
||||||
3. Allow percentage-based heights in the application
|
3. Allow percentage-based heights in the application
|
||||||
*/
|
*/
|
||||||
html,
|
html,
|
||||||
body {
|
body,
|
||||||
|
#__next,
|
||||||
|
#app {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
min-height: 100%;
|
min-height: 100vh;
|
||||||
/* overflow: hidden; */
|
/* overflow: hidden; */
|
||||||
overscroll-behavior-y: none; /* not working on Safari */
|
overscroll-behavior-y: none; /* not working on Safari */
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Typographic tweaks!
|
Typographic tweaks!
|
||||||
4. Add accessible line-height
|
4. Add accessible line-height
|
||||||
|
|
@ -52,6 +61,7 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
6. Improve media defaults
|
6. Improve media defaults
|
||||||
*/
|
*/
|
||||||
|
|
@ -63,6 +73,7 @@ svg {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
7. Remove built-in form typography styles
|
7. Remove built-in form typography styles
|
||||||
*/
|
*/
|
||||||
|
|
@ -73,6 +84,7 @@ select {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
8. Avoid text overflows
|
8. Avoid text overflows
|
||||||
*/
|
*/
|
||||||
|
|
@ -88,7 +100,6 @@ h6 {
|
||||||
/*
|
/*
|
||||||
9. Create a root stacking context
|
9. Create a root stacking context
|
||||||
*/
|
*/
|
||||||
#root,
|
|
||||||
#__next {
|
#__next {
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
|
|
@ -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 colors = require('@status-im/colors')
|
||||||
|
const plugin = require('tailwindcss/plugin')
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
@ -9,20 +12,51 @@ module.exports = {
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['var(--font-inter)'],
|
sans: ['var(--font-inter)', ...fontFamily.sans],
|
||||||
},
|
},
|
||||||
colors,
|
colors,
|
||||||
|
|
||||||
// use <Text /> from @status-im/components
|
// use <Text /> from @status-im/components or arbitrary values
|
||||||
fontSize: {},
|
// fontSize: {},
|
||||||
fontWeight: {
|
fontWeight: {
|
||||||
// regular: '400',
|
regular: '400',
|
||||||
// medium: '500',
|
medium: '500',
|
||||||
// semibold: '600',
|
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,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -51,8 +51,8 @@
|
||||||
"husky": "^8.0.3",
|
"husky": "^8.0.3",
|
||||||
"lint-staged": "^13.2.0",
|
"lint-staged": "^13.2.0",
|
||||||
"patch-package": "^6.5.1",
|
"patch-package": "^6.5.1",
|
||||||
"prettier": "^2.8.7",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.7",
|
"prettier-plugin-tailwindcss": "^0.2.8",
|
||||||
"rimraf": "^4.4.1",
|
"rimraf": "^4.4.1",
|
||||||
"turbo": "^1.8.8",
|
"turbo": "^1.8.8",
|
||||||
"typescript": "^5.0.3",
|
"typescript": "^5.0.3",
|
||||||
|
|
|
||||||
64
yarn.lock
64
yarn.lock
|
|
@ -3938,6 +3938,27 @@
|
||||||
aria-hidden "^1.1.1"
|
aria-hidden "^1.1.1"
|
||||||
react-remove-scroll "2.5.5"
|
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":
|
"@radix-ui/react-popover@^1.0.5":
|
||||||
version "1.0.5"
|
version "1.0.5"
|
||||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.5.tgz#9c58100ed6809eb611c0acbf032f9ab58c0b55d1"
|
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.5.tgz#9c58100ed6809eb611c0acbf032f9ab58c0b55d1"
|
||||||
|
|
@ -4124,6 +4145,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.13.10"
|
"@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":
|
"@radix-ui/react-use-previous@^0.1.1":
|
||||||
version "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"
|
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"
|
isobject "^3.0.0"
|
||||||
static-extend "^0.1.1"
|
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:
|
clean-css@^5.2.2:
|
||||||
version "5.3.2"
|
version "5.3.2"
|
||||||
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224"
|
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"
|
resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
|
||||||
integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
|
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:
|
collection-visit@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
|
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:
|
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"
|
version "2.6.7"
|
||||||
|
uid "1b5d62978f2ed07b99444f64f0df39f960a6d34d"
|
||||||
resolved "https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz#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:
|
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"
|
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
|
||||||
integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
|
integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
|
||||||
|
|
||||||
prettier-plugin-tailwindcss@^0.2.7:
|
prettier-plugin-tailwindcss@^0.2.8:
|
||||||
version "0.2.7"
|
version "0.2.8"
|
||||||
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.7.tgz#2314d728cce9c9699ced41a01253eb48b4218da5"
|
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.8.tgz#e9c0356680331f909a86fefe8fc2b247c21e23a2"
|
||||||
integrity sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==
|
integrity sha512-KgPcEnJeIijlMjsA6WwYgRs5rh3/q76oInqtMXBA/EMcamrcYJpyhtRhyX1ayT9hnHlHTuO8sIifHF10WuSDKg==
|
||||||
|
|
||||||
prettier@^1.19.1:
|
prettier@^1.19.1:
|
||||||
version "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"
|
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
|
||||||
integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
|
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:
|
pretty-bytes@5.6.0:
|
||||||
version "5.6.0"
|
version "5.6.0"
|
||||||
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
|
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"
|
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.0.1.tgz#427a09b13c83ae41eed3e88abb76a4af28bde1a6"
|
||||||
integrity sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==
|
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:
|
tailwindcss@^3.3.1:
|
||||||
version "3.3.1"
|
version "3.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
|
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"
|
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
|
||||||
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
|
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:
|
tsconfig-paths@^3.14.1:
|
||||||
version "3.14.2"
|
version "3.14.2"
|
||||||
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
|
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue