Merge pull request #208 from replayio/nacho/404-redesign

basement - 404 redesign

src/app/not-found.tsx

@@ -1,25 +1,22 @@
-import Link from 'next/link'
+import { Metadata, Viewport } from 'next'
+import { Header } from '~/components/layout/header'
+import { Hero } from '~/components/sections/404/hero'
 
-import { Button } from '~/components/Button'
-import { Logo } from '~/components/FullLogo'
-import { SlimLayout } from '~/components/SlimLayout'
+export const metadata: Metadata = {
+  title: 'Not found 404'
+}
+
+export const viewport: Viewport = {
+  themeColor: '#070a10'
+}
 
 export default function NotFound() {
   return (
-    <SlimLayout>
-      <div className="flex">
-        <Link href="/" aria-label="Home">
-          <Logo className="h-10 w-auto" />
-        </Link>
-      </div>
-      <p className="mt-20 text-sm font-medium text-gray-700">404</p>
-      <h1 className="mt-3 text-lg font-semibold text-gray-900">Page not found</h1>
-      <p className="mt-3 text-sm text-gray-700">
-        Sorry, we couldn’t find the page you’re looking for.
-      </p>
-      <Button href="/" className="mt-10">
-        Go back home
-      </Button>
-    </SlimLayout>
+    <>
+      <Header variant="dark" className="!border-none !bg-transparent" />
+      <main className="pt-[var(--header-height)]">
+        <Hero />
+      </main>
+    </>
   )
 }

src/components/layout/header/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, FC } from 'react'
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 
@@ -27,7 +27,11 @@ const NAVLINKS: Navlink[] = [
   { href: '/about', label: 'Company' }
 ]
 
-export function Header({ variant = 'light' }: { variant?: 'dark' | 'light' }) {
+type HeaderProps = {
+  variant?: 'dark' | 'light'
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const Header: FC<HeaderProps> = ({ variant = 'light', className, ...rest }) => {
   const toggle = useToggleState()
   const [scrollProgress, setScrollProgress] = useState(0)
   const pathname = usePathname()
@@ -55,8 +59,10 @@ export function Header({ variant = 'light' }: { variant?: 'dark' | 'light' }) {
         {
           ['border-b border-gray-100 !bg-white shadow-[0px_2px_18px_0px_rgba(5,73,30,0.08)]']:
             variant === 'light' && (scrollProgress > 0 || toggle.isOn)
-        }
+        },
+        className
       )}
+      {...rest}
     >
       <Container className="flex-1">
         <nav className="relative z-50 flex justify-between">

src/components/sections/404/hero/index.tsx

@@ -1,50 +1,65 @@
-import dynamic, { LoaderComponent } from 'next/dynamic'
+'use client'
+
+import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import { FC, useState } from 'react'
+import { Button } from '~/components/Button'
+import { Container } from '~/components/Container'
 
 import { Section } from '~/components/common/section'
-import { Container } from '~/components/layout/container'
-import { ButtonLink } from '~/components/primitives/cta'
 import { SITEMAP } from '~/lib/sitemap'
 
-import s from './hero.module.scss'
-
-const Sky = dynamic(() => import('~/components/common/sky').then((m) => m.Sky) as LoaderComponent, {
+const Sky = dynamic(() => import('~/components/common/sky').then((m) => m.Sky), {
   ssr: false
 })
 
 export const Hero: FC = () => {
   const [imageLoaded, setImageLoaded] = useState(false)
 
   return (
-    <Section className={s.section}>
-      <div className={s['bg-container']}>
-        <div className={s['child']}>
+    <Section
+      className="relative mt-[calc(var(--header-height)_*_-1)] flex h-[100dvh] flex-col justify-center overflow-hidden"
+      style={{
+        background:
+          'linear-gradient(251.84deg,#111827 -24.23%,#111826 -18.4%,#101726 -13.17%,#101725 -8.33%,#101624 -3.65%,#0f1523 1.08%,#0f1421 6.08%,#0e1420 11.58%,#0d121e 17.81%,#0c111c 24.96%,#0b1019 33.28%,#0a0e16 42.98%,#080c13 54.28%,#070a10 67.41%,#000 82.57%,#000 100%)'
+      }}
+    >
+      <div className="pointer-events-none absolute left-0 top-0 isolate h-full w-full">
+        <div className={'absolute inset-0'}>
           <Sky />
         </div>
       </div>
+
       <Container
         style={{
           opacity: imageLoaded ? 1 : 0
         }}
-        className={s.container}
+        className="duration-[0.5s] ease-ease-in-out relative z-10 flex h-full w-full transition-opacity"
       >
-        <h1 className="screen-reader-only">Page Not Found</h1>
-        <div className={s.title}>
-          <Image
-            src="/images/404/title.svg"
-            fill
-            alt="Page Not Found"
-            draggable={false}
-            onLoadingComplete={() => {
-              setImageLoaded(true)
-            }}
-          />
+        <div className="my-auto flex-1">
+          <h1 className="sr-only">Page Not Found</h1>
+          <div className="relative mx-auto h-[46px] w-full max-w-[1040px] select-none lg:h-[140px]">
+            <Image
+              className="object-contain"
+              src="/images/404/title.svg"
+              fill
+              alt="Page Not Found"
+              draggable={false}
+              onLoadingComplete={() => {
+                setImageLoaded(true)
+              }}
+              quality={100}
+            />
+          </div>
+          <p className="mx-0 mb-8 mt-6 text-center text-lg leading-6 text-slate-300">
+            The page you are looking for doesn&apos;t exist or has been moved.
+          </p>
+          <div className="flex w-full justify-center">
+            <Button href={SITEMAP.home.href || '/'} aria-label={SITEMAP.home.label}>
+              Go Back {SITEMAP.home.label}
+            </Button>
+          </div>
         </div>
-        <p className={s.text}>The page you are looking for doesn&apos;t exist or has been moved.</p>
-        <ButtonLink size="big" href={SITEMAP.home.href || '/'} aria-label={SITEMAP.home.label}>
-          Go Back {SITEMAP.home.label}
-        </ButtonLink>
       </Container>
     </Section>
   )