feat: comprehensive UI/a11y/i18n fixes and pre-push quality test

- Fix ClientWrappers missing 'about' namespace (MISSING_MESSAGE error)
- Add system/light/dark theme toggle with prefers-color-scheme detection
- Rewrite 404 page with i18n, accessibility, and proper navigation
- Rewrite books page with Header/Footer, i18n, and semantic HTML
- Add i18n keys to About, Footer, and both locale files
- Fix dark mode contrast: text-stone-300/600 -> text-stone-400
- Replace raw hex bg-[#fdfcf8] with bg-stone-50 across all components
- Guard console.error in ChatWidget and manage/page behind NODE_ENV
- Add aria-label to admin login form
- Remove emoji from manage page password toggle
- Update stale dates in privacy-policy and legal-notice
- Fix ScrollFadeIn index->delay prop type error in books page
- Fix privacy-policy and legal-notice landmark structure
- Add pre-push-check.test.ts: 13-category static analysis
  (i18n parity, namespace coverage, key resolution, accessibility,
   email validation, hex colors, emojis, console guards, env docs, types)
- Add explicit i18n check step to CI workflow

app/components/Footer.tsx

@@ -15,7 +15,7 @@ const Footer = () => {
   };
 
   return (
-    <footer className="bg-[#fdfcf8] dark:bg-stone-950 pt-16 sm:pt-24 md:pt-32 pb-8 sm:pb-12 px-4 sm:px-6 overflow-hidden transition-colors duration-500">
+    <footer className="bg-stone-50 dark:bg-stone-950 pt-16 sm:pt-24 md:pt-32 pb-8 sm:pb-12 px-4 sm:px-6 overflow-hidden transition-colors duration-500">
       <div className="max-w-7xl mx-auto">
 
         <div className="grid grid-cols-1 md:grid-cols-12 gap-8 sm:gap-10 md:gap-12 items-end">
@@ -25,15 +25,15 @@ const Footer = () => {
               dk
             </div>
             <div className="space-y-2">
-              <p className="text-xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">Software Engineer</p>
-              <p className="text-stone-500 text-sm font-medium">© {year} All rights reserved.</p>
+              <p className="text-xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">{t("role")}</p>
+              <p className="text-stone-600 dark:text-stone-400 text-sm font-medium">&copy; {year} {t("madeIn")}.</p>
             </div>
           </div>
 
           {/* Navigation Links */}
           <div className="md:col-span-4 grid grid-cols-2 gap-8">
             <div className="space-y-4">
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Legal</p>
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">{t("legalNotice")}</p>
               <div className="flex flex-col gap-2">
                 <Link href={`/${locale}/legal-notice`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("legalNotice")}</Link>
                 <Link href={`/${locale}/privacy-policy`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("privacyPolicy")}</Link>
@@ -54,7 +54,7 @@ const Footer = () => {
               onClick={scrollToTop}
               className="group flex flex-col items-center gap-4 text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
             >
-              <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-600 dark:text-stone-400 vertical-text transform rotate-180" style={{ writingMode: 'vertical-rl' }}>Back to top</span>
+              <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-600 dark:text-stone-400" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>{t("backToTop")}</span>
               <div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all shadow-sm">
                 <ArrowUp size={20} />
               </div>
@@ -66,15 +66,15 @@ const Footer = () => {
         <div className="mt-10 sm:mt-16 md:mt-20 pt-6 sm:pt-8 border-t border-stone-100 dark:border-stone-900 flex flex-col md:flex-row justify-between items-center gap-4">
           <div className="flex flex-col gap-1">
             <p className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">
-              Built with Next.js, Directus & Passion.
+              {t("builtWith")} Next.js, Directus &amp; Passion.
             </p>
-            <p className="text-[10px] text-stone-400 dark:text-stone-600 tracking-wide">
+            <p className="text-[10px] text-stone-500 dark:text-stone-500 tracking-wide">
               {t("aiDisclaimer")}
             </p>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-            <span className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">Systems Online</span>
+            <span className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">{t("systemsOnline")}</span>
           </div>
         </div>
       </div>