feat: upgrade UI with premium industrial aesthetics, purely visual language switch, and resilient error pages

Former-commit-id: e4d801c24e64c41816f86de9767b47894abb6806

app/[locale]/error.tsx

@@ -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>
     </>
   );
 }