Merge pull request #85 from privacy-scaling-explorations/76-develop-4…

…04-page 404 page
privacy-scaling-explorations · Sep 14, 2023 · 05be898 · 05be898 · vercel · Sep 14, 2023
2 parents c38c64f + 123f976
commit 05be898
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 1 deletion.
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,57 @@
+import "@/styles/globals.css"
+import React from "react"
+import Image from "next/image"
+import Link from "next/link"
+
+import { fontDisplay, fontSans } from "@/lib/fonts"
+import { Button } from "@/components/ui/button"
+import { SiteHeader } from "@/components/site-header"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+
+export default function NotFound() {
+  return (
+    <html
+      lang="en"
+      className={`${fontSans.variable} ${fontDisplay.variable}`}
+      suppressHydrationWarning
+    >
+      <head />
+      <body className="min-h-screen">
+        <div className="relative flex flex-col h-screen bg-anakiwa-50">
+          <SiteHeader />
+          <div className="container m-auto">
+            <div className="flex flex-col -mt-16 gap-7">
+              <div className="flex flex-col items-center justify-center gap-3 text-center">
+                <div className="flex flex-col gap-2">
+                  <Image
+                    width={80}
+                    height={80}
+                    src="/icons/404-search.svg"
+                    alt="emotion sad"
+                    className="w-12 h-12 mx-auto md:w-24 md:h-24 text-anakiwa-400"
+                  />
+                  <span className="text-5xl font-bold text-anakiwa-400 md:text-8xl font-display">
+                    404
+                  </span>
+                </div>
+                <div className="flex flex-col gap-5">
+                  <span className="text-2xl font-bold md:text-6xl text-tuatara-950 font-display">
+                    Oops! Page not found
+                  </span>
+                  <span className="font-sans text-base font-normal md:text-lg">
+                    The page you are looking for might have been removed, had
+                    its name changed or is temporarily unavailable.
+                  </span>
+                </div>
+              </div>
+              <Link href="/" className="mx-auto">
+                <Button variant="black">Go to homepage</Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <TailwindIndicator />
+      </body>
+    </html>
+  )
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -6,7 +6,7 @@ import { LucideIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center duration-100 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  "font-sans inline-flex items-center justify-center duration-100 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
   {
     variants: {
       variant: {

diff --git a/public/icons/404-search.svg b/public/icons/404-search.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -30,10 +30,12 @@ module.exports = {
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         anakiwa: {
+          50: "#F2FAFD",
           100: "hsl(var(--anakiwa))",
           100: "#E4F3FA",
           200: "#C2E8F5",
           300: "#A3DFF0",
+          400: "#50C3E0",
           500: "#29ACCE",
           950: "#103241",
         },