1 files changed, 113 insertions, 0 deletions
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..472e029
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,113 @@
+import Link from "next/link";
+import { Shield, Mail, Linkedin, Github } from "lucide-react";
+
+const footerLinks = {
+  services: [
+    { name: "Audit IAM", href: "/services#audit" },
+    { name: "Intégration OIDC", href: "/services#oidc" },
+    { name: "Migration Zero Trust", href: "/services#zero-trust" },
+    { name: "Sécurisation AD / Entra", href: "/services#ad-entra" },
+  ],
+  resources: [
+    { name: "Articles", href: "/articles" },
+    { name: "Démo OIDC", href: "/demos/oidc-flow" },
+    { name: "Démo OAuth", href: "/demos/oauth-playground" },
+    { name: "Démo Zero Trust", href: "/demos/zero-trust" },
+  ],
+};
+
+export function Footer() {
+  return (
+    <footer className="bg-cosmos-950 border-t border-cosmos-800">
+      <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="md:col-span-1">
+            <Link href="/" className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-lg bg-araucaria-500 flex items-center justify-center">
+                <Shield className="w-5 h-5 text-cosmos-950" />
+              </div>
+              <span className="text-lg font-bold text-nieve">Der-topogo</span>
+            </Link>
+            <p className="mt-4 text-sm text-cosmos-400 leading-relaxed">
+              Consulting senior en Identity & Access Management et sécurité
+              informatique. Expert OIDC, OAuth, Zero Trust, AD, Entra ID.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-semibold text-araucaria-400 uppercase tracking-wider">
+              Services
+            </h3>
+            <ul className="mt-4 space-y-3">
+              {footerLinks.services.map((link) => (
+                <li key={link.name}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-cosmos-300 hover:text-nieve transition-colors"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-semibold text-araucaria-400 uppercase tracking-wider">
+              Ressources
+            </h3>
+            <ul className="mt-4 space-y-3">
+              {footerLinks.resources.map((link) => (
+                <li key={link.name}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-cosmos-300 hover:text-nieve transition-colors"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-semibold text-araucaria-400 uppercase tracking-wider">
+              Contact
+            </h3>
+            <div className="mt-4 space-y-3">
+              <a
+                href="mailto:contact@your-domain.com"
+                className="flex items-center gap-2 text-sm text-cosmos-300 hover:text-nieve transition-colors"
+              >
+                <Mail className="w-4 h-4" />
+                contact@your-domain.com
+              </a>
+              <div className="flex gap-4 pt-2">
+                <a
+                  href="#"
+                  className="text-cosmos-400 hover:text-nieve transition-colors"
+                  aria-label="LinkedIn"
+                >
+                  <Linkedin className="w-5 h-5" />
+                </a>
+                <a
+                  href="#"
+                  className="text-cosmos-400 hover:text-nieve transition-colors"
+                  aria-label="GitHub"
+                >
+                  <Github className="w-5 h-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-cosmos-800">
+          <p className="text-xs text-cosmos-500 text-center">
+            &copy; {new Date().getFullYear()} Der-topogo. Tous droits réservés.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}