93 lines
4.6 KiB
TypeScript
93 lines
4.6 KiB
TypeScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import MarketingLayout from '@/layouts/mainWebsite';
|
|
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
|
|
|
interface NotFoundProps {
|
|
requestedPath?: string;
|
|
}
|
|
|
|
const NotFound: React.FC<NotFoundProps> = ({ requestedPath }) => {
|
|
const { t } = useTranslation('marketing');
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
const tips = t('not_found.tips', { returnObjects: true }) as string[];
|
|
|
|
return (
|
|
<MarketingLayout title={t('not_found.title')}>
|
|
<Head title={t('not_found.title')} />
|
|
<section className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-900 via-gray-900 to-black text-white">
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-pink-500/30 blur-3xl" />
|
|
<div className="absolute right-0 top-1/3 h-80 w-80 rounded-full bg-purple-500/20 blur-3xl" />
|
|
<div className="absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-blue-500/20 blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
|
|
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold uppercase tracking-widest text-pink-200 shadow-lg shadow-pink-500/30 backdrop-blur">
|
|
404 · {t('not_found.title')}
|
|
</div>
|
|
|
|
<h1 className="text-balance text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
|
|
{t('not_found.subtitle')}
|
|
</h1>
|
|
|
|
{requestedPath && (
|
|
<p className="mt-4 text-sm text-white/60">
|
|
{t('not_found.requested_path_label', 'Angefragter Pfad')}: <span className="font-mono">{requestedPath}</span>
|
|
</p>
|
|
)}
|
|
|
|
<p className="mt-6 max-w-2xl text-lg text-white/70 sm:text-xl">
|
|
{t('not_found.description')}
|
|
</p>
|
|
|
|
<div className="mt-10 flex flex-col gap-6 rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-lg shadow-black/40 backdrop-blur md:flex-row md:gap-8">
|
|
<div className="md:w-1/3">
|
|
<h2 className="text-lg font-semibold uppercase tracking-widest text-pink-200">
|
|
{t('not_found.tip_heading')}
|
|
</h2>
|
|
<div className="mt-4 h-1 w-16 rounded-full bg-pink-400" />
|
|
</div>
|
|
<ul className="space-y-3 text-base text-white/80 md:w-2/3">
|
|
{tips.map((tip, index) => (
|
|
<li key={`${tip}-${index}`} className="flex items-start gap-3">
|
|
<span className="mt-1 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-white/10 text-xs font-semibold text-pink-200">
|
|
{index + 1}
|
|
</span>
|
|
<span>{tip}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="mt-12 flex flex-col gap-3 sm:flex-row">
|
|
<Link
|
|
href={localizedPath('/')}
|
|
className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 font-medium text-gray-900 shadow-lg shadow-pink-500/30 transition hover:-translate-y-1 hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
|
>
|
|
{t('not_found.cta_home')}
|
|
</Link>
|
|
<Link
|
|
href={localizedPath('/packages')}
|
|
className="inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 font-medium text-white transition hover:-translate-y-1 hover:border-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
|
>
|
|
{t('not_found.cta_packages')}
|
|
</Link>
|
|
<Link
|
|
href={localizedPath('/kontakt')}
|
|
className="inline-flex items-center justify-center rounded-full border border-transparent bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 font-medium text-white shadow-lg shadow-pink-500/30 transition hover:-translate-y-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
|
>
|
|
{t('not_found.cta_contact')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
NotFound.layout = (page: React.ReactNode) => page;
|
|
|
|
export default NotFound;
|