Error Page 2

1import { Button } from '@/components/ui/button'
2import { ArrowLeft } from 'lucide-react'
3 
4export function ErrorPage2() {
5  return (
6    <div className='grid min-h-screen w-full xl:grid-cols-2'>
7      <div className='flex flex-col p-16'>
8        {/* Logo */}
9        <div className='mb-8 flex items-center justify-center gap-2 xl:justify-start'>
10          <div className='bg-primary flex size-8 items-center justify-center rounded-lg'>
11            <svg className='text-primary-foreground size-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
12              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 10V3L4 14h7v7l9-11h-7z' />
13            </svg>
14          </div>
15          <span className='text-xl font-bold'>ShadcnStore</span>
16        </div>
17 
18        <div className='mt-8 flex flex-1 flex-col items-center justify-center text-center xl:items-start xl:text-start'>
19          <div className='mb-3 flex items-center gap-3'>
20            <span className='text-sm font-semibold'>404</span>
21          </div>
22          <h1 className='mb-2 text-4xl font-bold'>Page Not Found</h1>
23          <p>Oops! The page you're trying to access doesn't exist.</p>
24          <Button className="h-9 px-4 py-2 mt-8 cursor-pointer">
25            <ArrowLeft />
26            <span>Go Back Home</span>
27          </Button>
28        </div>
29      </div>
30      <div className='relative hidden xl:block'>
31        <img
32          src='https://ui.shadcn.com/placeholder.svg'
33          alt='placeholder image'
34          className='absolute inset-0 h-full w-full object-cover dark:brightness-[0.95] dark:invert'
35        />
36      </div>
37    </div>
38  )
39}
40 
41export default ErrorPage2