Create Footer component to refactor

components/layout/Footer.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Shield } from "lucide-react"
+
+interface FooterProps {
+  variant?: 'default' | 'dark'
+  showNavigation?: boolean
+  onAuthClick?: () => void
+}
+
+export default function Footer({ 
+  variant = 'default', 
+  showNavigation = true,
+  onAuthClick 
+}: FooterProps) {
+  const getFooterStyles = () => {
+    switch (variant) {
+      case 'dark':
+        return "bg-gray-900 text-gray-300 py-8 px-4"
+      default:
+        return "bg-gray-900 dark:bg-gray-900 text-white py-12 px-4 transition-colors"
+    }
+  }
+
+  return (
+    <footer className={getFooterStyles()}>
+      <div className="container mx-auto">
+        {showNavigation ? (
+          <div className="grid md:grid-cols-2 gap-8">
+            <div>
+              <div className="flex items-center space-x-2 mb-4">
+                <Shield className="h-8 w-8 text-blue-400" />
+                <span className="text-2xl font-bold">DocV</span>
+                <Badge variant="secondary" className="ml-2">
+                  By 4NK
+                </Badge>
+              </div>
+              <p className="text-gray-400 dark:text-gray-300 mb-4">
+                4NK, pionnier du Web 5.0. Conçoit et développe des solutions de souveraineté.
+              </p>
+              <p className="text-gray-400 dark:text-gray-300">contact@docv.fr</p>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-4 text-white dark:text-white">Navigation</h3>
+              <div className="space-y-2">
+                <Link href="#produit" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
+                  Le produit
+                </Link>
+                <Link href="#securite" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
+                  Sécurité
+                </Link>
+                <Link href="#tarifs" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
+                  Tarifs
+                </Link>
+                <Link href="/formation" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
+                  Formation
+                </Link>
+                <Link href="" onClick={onAuthClick} className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
+                  Connexion
+                </Link>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="text-center">
+            <div className="flex items-center justify-center space-x-2 mb-4">
+              <Shield className="h-6 w-6 text-blue-400" />
+              <span className="text-xl font-bold text-gray-100">DocV</span>
+              <Badge variant="secondary" className="bg-gray-700 text-gray-200">By 4NK</Badge>
+            </div>
+            <p className="text-gray-400">
+              4NK, pionnier du Web 5.0 - Solutions de souveraineté numérique
+            </p>
+          </div>
+        )}
+
+        {showNavigation && (
+          <div className="border-t border-gray-800 dark:border-gray-700 mt-8 pt-8 text-center text-gray-400 dark:text-gray-300">
+            <p>&copy; 2025 4NK. Tous droits réservés.</p>
+          </div>
+        )}
+      </div>
+    </footer>
+  )
+}