Kalana B. Thilakarathna
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/navigation'
|
|
import { HugeiconsIcon } from '@hugeicons/react'
|
|
import { ArrowLeft01Icon, Home01Icon, CustomerSupportIcon } from '@hugeicons/core-free-icons'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
export default function NotFoundPage() {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<div className="flex min-h-svh flex-col items-center justify-center bg-background px-6 text-center">
|
|
{/* Wordmark */}
|
|
<div className="mb-10 flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
|
|
D
|
|
</div>
|
|
<span className="font-semibold text-foreground">Distribution</span>
|
|
</div>
|
|
|
|
{/* 404 badge */}
|
|
<div className="mb-4 inline-flex items-center rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground tracking-widest uppercase">
|
|
Error 404
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<h1 className="mb-3 font-heading text-4xl font-semibold text-foreground sm:text-5xl">
|
|
Page not found
|
|
</h1>
|
|
|
|
{/* Assurance copy */}
|
|
<p className="mb-2 max-w-md text-base text-muted-foreground">
|
|
This URL doesn't exist in the system — but everything else is working fine.
|
|
</p>
|
|
<p className="mb-10 max-w-md text-sm text-muted-foreground">
|
|
Your data, orders, and operations are all safe and unaffected. You may have followed a broken link or typed an address that has changed.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:gap-2">
|
|
<Button variant="outline" onClick={() => router.back()}>
|
|
<HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
|
|
Go back
|
|
</Button>
|
|
<Button render={<Link href="/" />} nativeButton={false}>
|
|
<HugeiconsIcon icon={Home01Icon} size={16} />
|
|
Back to Dashboard
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Support nudge */}
|
|
<p className="mt-12 flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<HugeiconsIcon icon={CustomerSupportIcon} size={13} />
|
|
If you believe this is a mistake, contact your system administrator.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|