blog.z0x.ca/src/pages/404.astro
2024-09-11 01:58:29 -07:00

55 lines
1.5 KiB
Text

---
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import { SITE } from '@consts'
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>
<Breadcrumb className="mb-6">
<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>