feat: upgrade UI with premium industrial aesthetics, purely visual language switch, and resilient error pages
Former-commit-id: e4d801c24e64c41816f86de9767b47894abb6806
This commit is contained in:
@@ -106,15 +106,15 @@ export default async function ContactPage({ params }: ContactPageProps) {
|
||||
url: SITE_URL,
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
streetAddress: 'Raiffeisenstraße 22',
|
||||
addressLocality: 'Remshalden',
|
||||
postalCode: '73630',
|
||||
streetAddress: 'Gewerbestraße 22',
|
||||
addressLocality: 'Guben',
|
||||
postalCode: '03172',
|
||||
addressCountry: 'DE',
|
||||
},
|
||||
geo: {
|
||||
'@type': 'GeoCoordinates',
|
||||
latitude: 48.8144,
|
||||
longitude: 9.4144,
|
||||
latitude: 51.94276,
|
||||
longitude: 14.71764,
|
||||
},
|
||||
openingHoursSpecification: [
|
||||
{
|
||||
@@ -257,7 +257,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ContactMap address={t('info.address')} lat={48.8144} lng={9.4144} />
|
||||
<ContactMap address={t('info.address')} lat={51.94276} lng={14.71764} />
|
||||
</Suspense>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -39,37 +39,55 @@ export default function Error({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container className="relative py-32 mt-16 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
|
||||
{/* Industrial Background Element */}
|
||||
<div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
|
||||
<span className="text-[20rem] font-bold select-none">500</span>
|
||||
<div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
|
||||
{/* Deep Tech Grid Background */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
|
||||
|
||||
{/* Glowing Orb */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-red-500/20 blur-[120px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 w-full max-w-2xl mx-auto">
|
||||
<div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
|
||||
{/* Inner Shimmer */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
|
||||
|
||||
<div className="relative mb-8">
|
||||
<h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
|
||||
500
|
||||
</h1>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-red-500/40 blur-md skew-y-[-10deg]" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-red-500 skew-y-[-10deg] shadow-[0_0_15px_rgba(239,68,68,1)]" />
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
|
||||
<span className="w-2 h-2 rounded-full bg-red-500 animate-[ping_2s_infinite] shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
|
||||
SYSTEM PROTOCOL: CRITICAL ERROR
|
||||
</div>
|
||||
|
||||
<Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
|
||||
<p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
|
||||
{t('description')}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button onClick={() => reset()} variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
|
||||
{t('tryAgain')}
|
||||
</Button>
|
||||
<Button href="/" variant="outline" className="border-white/20 text-white hover:bg-white/5">
|
||||
{t('goHome')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative Base Line */}
|
||||
<div className="w-full flex justify-center mt-12 opacity-50">
|
||||
<div className="w-px h-24 bg-gradient-to-t from-red-500/50 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-8">
|
||||
<Heading level={1} className="text-6xl md:text-8xl font-bold mb-2 text-saturated">
|
||||
500
|
||||
</Heading>
|
||||
<Scribble variant="underline" className="w-full h-6 -bottom-2 left-0 text-saturated/40" />
|
||||
</div>
|
||||
|
||||
<Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
|
||||
<p className="text-text-secondary mb-10 max-w-md text-lg mx-auto">{t('description')}</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button onClick={() => reset()} variant="saturated" size="lg">
|
||||
{t('tryAgain')}
|
||||
</Button>
|
||||
<Button href="/" variant="outline" size="lg">
|
||||
{t('goHome')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Decorative Industrial Line */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-b from-saturated/50 to-transparent" />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
1
app/[locale]/kontakt/page.tsx
Normal file
1
app/[locale]/kontakt/page.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { default, generateMetadata } from '../contact/page';
|
||||
@@ -15,56 +15,56 @@ export default async function NotFound() {
|
||||
<>
|
||||
<script dangerouslySetInnerHTML={{ __html: `document.body.setAttribute('data-force-solid-header', 'true');` }} />
|
||||
<ClientNotFoundTracker path="" />
|
||||
<Container className="relative py-32 mt-16 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
|
||||
{/* Industrial Background Element */}
|
||||
<div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
|
||||
<span className="text-[20rem] font-bold select-none">404</span>
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
|
||||
{/* Deep Tech Grid Background */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
|
||||
|
||||
{/* Glowing Orb */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/20 blur-[120px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="relative mb-8">
|
||||
<Heading level={1} className="text-6xl md:text-8xl font-bold mb-2">
|
||||
404
|
||||
</Heading>
|
||||
<Scribble
|
||||
variant="circle"
|
||||
className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10 w-full max-w-2xl mx-auto">
|
||||
<div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
|
||||
{/* Inner Shimmer */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
|
||||
|
||||
<div className="relative mb-8">
|
||||
<h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
|
||||
404
|
||||
</h1>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-primary/40 blur-md skew-y-[-10deg]" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-primary skew-y-[-10deg] shadow-[0_0_15px_rgba(var(--color-primary),1)]" />
|
||||
</div>
|
||||
|
||||
<Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
<div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
|
||||
<span className="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
|
||||
SYSTEM PROTOCOL: NOT FOUND
|
||||
</div>
|
||||
|
||||
<p className="text-text-secondary mb-10 max-w-md text-lg mx-auto">{t('description')}</p>
|
||||
<Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
|
||||
{t('title')}
|
||||
</Heading>
|
||||
|
||||
{suggestedUrl && (
|
||||
<div className="mb-12 p-6 bg-accent/10 border border-accent/20 rounded-2xl animate-fade-in shadow-lg relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-accent/5 -skew-x-12 translate-x-full group-hover:translate-x-0 transition-transform duration-700" />
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-primary font-bold mb-2 text-lg">
|
||||
Did you mean to visit the {suggestedLang} version?
|
||||
</h3>
|
||||
<p className="text-text-secondary text-sm mb-4">
|
||||
This page exists, but in another language.
|
||||
</p>
|
||||
<Button href={suggestedUrl} variant="accent" size="md" className="w-full sm:w-auto">
|
||||
Go to {suggestedLang} Version
|
||||
<p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
|
||||
{t('description')}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button href="/" variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
|
||||
{t('cta')}
|
||||
</Button>
|
||||
<Button href="/kontakt" variant="outline" className="border-white/20 text-white hover:bg-white/5">
|
||||
Support kontaktieren
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button href="/" variant={suggestedUrl ? 'outline' : 'accent'} size="lg">
|
||||
{t('cta')}
|
||||
</Button>
|
||||
<Button href="/contact" variant={suggestedUrl ? 'ghost' : 'outline'} size="lg">
|
||||
Contact Support
|
||||
</Button>
|
||||
|
||||
{/* Decorative Base Line */}
|
||||
<div className="w-full flex justify-center mt-12 opacity-50">
|
||||
<div className="w-px h-24 bg-gradient-to-t from-primary to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-t from-accent/50 to-transparent" />
|
||||
</Container>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user