67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client';
|
|
import { useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { Icon } from '@iconify/react';
|
|
import { Button } from '@/app/(landing)/components/ui/button';
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyTitle,
|
|
} from '@/app/(landing)/components/ui/empty';
|
|
|
|
export function NotFoundPage() {
|
|
useEffect(() => {
|
|
document.title = '404 — Página no encontrada | Rynext Technologies';
|
|
}, []);
|
|
|
|
return (
|
|
<main
|
|
id="main-content"
|
|
className="relative flex w-full items-center justify-center px-8 pb-24 pt-40"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -top-16 -left-20 h-[24rem] w-[24rem] rounded-full blur-[110px]"
|
|
style={{ background: 'rgba(59,130,246,0.16)' }}
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -top-16 -right-20 h-[24rem] w-[24rem] rounded-full blur-[110px]"
|
|
style={{ background: 'rgba(139,92,246,0.16)' }}
|
|
/>
|
|
|
|
<Empty className="relative border-none">
|
|
<EmptyHeader>
|
|
<EmptyTitle
|
|
className="font-display font-black"
|
|
style={{ fontSize: 'clamp(6rem, 20vw, 10rem)', lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--foreground)' }}
|
|
>
|
|
404
|
|
</EmptyTitle>
|
|
<EmptyDescription style={{ color: 'var(--muted-foreground)' }}>
|
|
La página que buscas no existe o fue movida.
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<div className="flex gap-3">
|
|
<Button asChild>
|
|
<Link href="/">
|
|
<Icon icon="ph:house" className="mr-2 size-4" />
|
|
Ir al inicio
|
|
</Link>
|
|
</Button>
|
|
<Button asChild variant="outline">
|
|
<Link href="/portafolio">
|
|
<Icon icon="ph:compass" className="mr-2 size-4" />
|
|
Ver portafolio
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</EmptyContent>
|
|
</Empty>
|
|
</main>
|
|
);
|
|
}
|