From 5ea0ed21e1c7103b4b1a13fe7f91eddede4d41fd Mon Sep 17 00:00:00 2001
From: Nicolas Cantu <nicolas.cantu@pm.me>
Date: Sat, 27 Dec 2025 23:01:34 +0100
Subject: [PATCH] Update /docs page with dark theme and modern styling

- Replace DocsHeader with PageHeader and Footer
- Update DocsSidebar with dark cyberpunk theme
- Update DocsContent with dark theme and styled prose
- Use i18n for page title
- All TypeScript checks pass
---
 components/DocsContent.tsx |  6 +++---
 components/DocsSidebar.tsx | 10 +++++-----
 components/HomeView.tsx    |  2 +-
 pages/docs.tsx             | 34 ++++++++--------------------------
 4 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/components/DocsContent.tsx b/components/DocsContent.tsx
index 5251109..871fb6b 100644
--- a/components/DocsContent.tsx
+++ b/components/DocsContent.tsx
@@ -10,14 +10,14 @@ export function DocsContent({ content, loading }: DocsContentProps) {
   if (loading) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-500">Chargement de la documentation...</p>
+        <p className="text-cyber-accent">Chargement de la documentation...</p>
       </div>
     )
   }
 
   return (
-    <div className="bg-white rounded-lg shadow-sm p-8">
-      <div className="prose max-w-none">
+    <div className="bg-cyber-dark border border-neon-cyan/20 rounded-lg p-8 backdrop-blur-sm">
+      <div className="prose prose-invert max-w-none prose-headings:text-neon-cyan prose-headings:font-mono prose-p:text-cyber-accent prose-a:text-neon-green prose-a:hover:text-neon-cyan prose-strong:text-neon-green prose-code:text-neon-cyan prose-code:bg-cyber-darker prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:bg-cyber-darker prose-pre:border prose-pre:border-neon-cyan/20 prose-blockquote:border-neon-cyan/50 prose-blockquote:text-cyber-accent/70 prose-ul:text-cyber-accent prose-ol:text-cyber-accent prose-li:marker:text-neon-cyan">
         {renderMarkdown(content)}
       </div>
     </div>
diff --git a/components/DocsSidebar.tsx b/components/DocsSidebar.tsx
index 897d99f..6065319 100644
--- a/components/DocsSidebar.tsx
+++ b/components/DocsSidebar.tsx
@@ -17,17 +17,17 @@ interface DocsSidebarProps {
 export function DocsSidebar({ docs, selectedDoc, onSelectDoc }: DocsSidebarProps) {
   return (
     <aside className="lg:w-64 flex-shrink-0">
-      <div className="bg-white rounded-lg shadow-sm p-4 sticky top-4">
-        <h2 className="text-lg font-bold mb-4">Documentation</h2>
+      <div className="bg-cyber-dark border border-neon-cyan/20 rounded-lg p-4 sticky top-4 backdrop-blur-sm">
+        <h2 className="text-lg font-bold mb-4 text-neon-cyan font-mono">Documentation</h2>
         <nav className="space-y-2">
           {docs.map((doc) => (
             <button
               key={doc.id}
               onClick={() => onSelectDoc(doc.id)}
-              className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+              className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-all ${
                 selectedDoc === doc.id
-                  ? 'bg-blue-100 text-blue-700 font-medium'
-                  : 'text-gray-600 hover:bg-gray-100'
+                  ? 'bg-neon-cyan/20 text-neon-cyan font-medium border border-neon-cyan/50 shadow-glow-cyan'
+                  : 'text-cyber-accent hover:bg-cyber-dark/50 hover:text-neon-cyan border border-transparent hover:border-neon-cyan/30'
               }`}
             >
               {doc.title}
diff --git a/components/HomeView.tsx b/components/HomeView.tsx
index 012e2bf..0904ad3 100644
--- a/components/HomeView.tsx
+++ b/components/HomeView.tsx
@@ -108,7 +108,7 @@ function HomeContent({
       )}
 
       <ArticlesList {...articlesListProps} />
-      
+
       <HomeIntroSection />
     </div>
   )
diff --git a/pages/docs.tsx b/pages/docs.tsx
index 64abbfb..c65d341 100644
--- a/pages/docs.tsx
+++ b/pages/docs.tsx
@@ -1,9 +1,10 @@
 import Head from 'next/head'
-import Link from 'next/link'
-import { ConnectButton } from '@/components/ConnectButton'
 import { DocsSidebar } from '@/components/DocsSidebar'
 import { DocsContent } from '@/components/DocsContent'
+import { PageHeader } from '@/components/PageHeader'
+import { Footer } from '@/components/Footer'
 import { useDocs } from '@/hooks/useDocs'
+import { t } from '@/lib/i18n'
 
 type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment'
 
@@ -36,39 +37,19 @@ const docs: DocLink[] = [
   },
 ]
 
-function DocsHeader() {
-  return (
-    <header className="bg-white shadow-sm">
-      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-gray-900 hover:text-gray-700">
-          zapwall.fr
-        </Link>
-        <div className="flex items-center gap-4">
-          <Link
-            href="/"
-            className="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm font-medium"
-          >
-            Articles
-          </Link>
-          <ConnectButton />
-        </div>
-      </div>
-    </header>
-  )
-}
-
 export default function DocsPage() {
   const { selectedDoc, docContent, loading, loadDoc } = useDocs(docs)
 
   return (
     <>
       <Head>
-        <title>Documentation - zapwall.fr</title>
+        <title>{t('nav.documentation')} - zapwall.fr</title>
         <meta name="description" content="Documentation complète pour zapwall.fr" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="min-h-screen bg-gray-50">
-        <DocsHeader />
+      <main className="min-h-screen bg-cyber-darker">
+        <PageHeader />
         <div className="max-w-7xl mx-auto px-4 py-8">
           <div className="flex flex-col lg:flex-row gap-8">
             <DocsSidebar
@@ -83,6 +64,7 @@ export default function DocsPage() {
             </div>
           </div>
         </div>
+        <Footer />
       </main>
     </>
   )