1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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">
© {new Date().getFullYear()} Der-topogo. Tous droits réservés.
</p>
</div>
</div>
</footer>
);
}
|
