Enhance NotFound page with custom SVG background and improved layout

src/app/not-found.tsx

@@ -1,13 +1,36 @@
+import Image from "next/image"
 import Link from "next/link"
+import { FiHome } from "react-icons/fi"
+import notFoundBackground from "@/assets/shapes/not-found.svg"
+import { Button } from "@/components/ui/button"
 
-export default async function NotFound() {
+export default function NotFound() {
   return (
-    <main className="container mx-auto px-4 py-8">
-      <h2 className="mb-4 font-bold text-3xl text-accent-foreground">Not Found</h2>
+    <main className="relative isolate flex min-h-[calc(100dvh-var(--header-height))] w-full items-center justify-center overflow-hidden">
+      <section className="relative flex h-full w-full items-center justify-center">
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <Image src={notFoundBackground} alt="" aria-hidden priority className="h-auto w-full max-w-4xl select-none" />
+        </div>
 
-      <p className="mb-4">This page doesn&apos;t exist or is not available yet.</p>
+        <div className="relative z-10 flex flex-col items-center gap-12 text-center">
+          <h1 className="typo-display-extralarge inline-block bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-9 text-transparent">
+            404
+          </h1>
 
-      <Link href="/">Go to homepage</Link>
+          <p className="typo-headline-large text-text-primary">
+            Non trovo quello che cerchi.
+            <br />
+            Controlla l'URL o visita un'altra sezione del sito.
+          </p>
+
+          <Button asChild variant="primary" size="lg">
+            <Link href="/">
+              Home
+              <FiHome />
+            </Link>
+          </Button>
+        </div>
+      </section>
     </main>
   )
 }

src/components/header.tsx

@@ -7,7 +7,7 @@ export const HEADER_HEIGHT = "4.5rem"
 
 export async function Header() {
   return (
-    <header className="sticky top-0 isolate z-20 flex h-(--header-height) w-full shrink-0 items-center justify-center border-b bg-card">
+    <header className="sticky top-0 isolate z-20 flex h-(--header-height) w-full shrink-0 items-center justify-center border-b bg-transparent">
       <div className="container mx-auto flex items-center justify-center space-x-6 px-4">
         <Link href="/">
           <div className="flex items-center space-x-4">