feat: breadcrumbs and more

src/pages/404.astro

@@ -3,18 +3,53 @@ import Layout from '@layouts/Layout.astro'
 import Container from '@components/Container.astro'
 import Link from '@components/Link.astro'
 import { SITE } from '@consts'
-import { Button } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 ---
 
 <Layout title="404" description={SITE.DESCRIPTION}>
   <Container>
-    <div class="mt-16 grid place-items-center gap-3">
-      <h4 class="text-2xl font-semibold">404: Page not found</h4>
-      <span>
-        <a href="/">
-          <Button variant="outline"> Go to home page </Button>
-        </a>
-      </span>
-    </div>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>???</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
+    <section
+      class="flex min-h-[50vh] flex-col items-center justify-center space-y-6 text-center"
+    >
+      <div class="max-w-md">
+        <h1 class="mb-4 text-3xl font-bold">404: Page not found</h1>
+        <p class="prose dark:prose-invert">
+          Oops! The page you're looking for doesn't exist.
+        </p>
+      </div>
+      <div>
+        <Link
+          href="/"
+          class={buttonVariants({ variant: 'outline' }) + ' group'}
+        >
+          <span class="mr-1.5 transition-transform group-hover:-translate-x-1"
+            >&larr;</span
+          > Go to home page
+        </Link>
+      </div>
+    </section>
   </Container>
 </Layout>