first step cleaning

src/features/landing/AegisSection.tsx

@@ -0,0 +1,116 @@
+import { Activity, HardDrive, Server, Shield, ShieldCheck, Lock, Zap } from "lucide-react";
+
+export default function AegisSection() {
+    return(
+        <section id="aegis" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
+            <span className="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
+              Transparence Totale
+            </span>
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+              Le Portail AEGIS : Votre tableau de bord en temps réel
+            </h2>
+            <p className="text-slate-600 dark:text-slate-400 text-sm">
+              En tant que dirigeant, vous disposez d'un espace privé réassurant qui vous prouve chaque jour que votre entreprise est protégée.
+            </p>
+          </div>
+
+          <div className="grid lg:grid-cols-12 gap-8 items-center">
+
+            {/* Feature List Left (5 cols) */}
+            <div className="lg:col-span-5 space-y-3">
+              <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
+                <div className="flex items-center gap-3 mb-1">
+                  <div className="p-2 rounded-xl bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
+                    <Activity className="h-4 w-4" />
+                  </div>
+                  <h4 className="text-sm font-bold text-slate-900 dark:text-white">Suivi de Santé & Disponibilité</h4>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
+                  Visualisez l'état de marche de vos serveurs et de vos accès avec des indicateurs vert émeraude simples à lire.
+                </p>
+              </div>
+
+              <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
+                <div className="flex items-center gap-3 mb-1">
+                  <div className="p-2 rounded-xl bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
+                    <Shield className="h-4 w-4" />
+                  </div>
+                  <h4 className="text-sm font-bold text-slate-900 dark:text-white">Sauvegardes & Menaces Neutralisées</h4>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
+                  Consultez la date exacte de votre dernière sauvegarde et le nombre d'intrusions bloquées ce mois-ci.
+                </p>
+              </div>
+
+              <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
+                <div className="flex items-center gap-3 mb-1">
+                  <div className="p-2 rounded-xl bg-indigo-50 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400">
+                    <Lock className="h-4 w-4" />
+                  </div>
+                  <h4 className="text-sm font-bold text-slate-900 dark:text-white">Coffre-Fort & Canal Direct</h4>
+                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
+                  Stockez vos documents importants et contactez directement votre spécialiste d'un simple clic.
+                </p>
+              </div>
+            </div>
+
+            {/* UI Box Preview (Style Google Admin Console) (7 cols) */}
+            <div className="lg:col-span-7 bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-lg space-y-5">
+
+              {/* App Header Bar */}
+              <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
+                <div className="flex items-center gap-2.5">
+                  <div className="h-3 w-3 rounded-full bg-emerald-500" />
+                  <span className="text-xs font-bold text-slate-900 dark:text-white">AEGIS Command Center</span>
+                </div>
+                <span className="text-[11px] font-semibold text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-200/60 dark:border-emerald-800/60">
+                  ● Système Protégé
+                </span>
+              </div>
+
+              {/* Metric Rows */}
+              <div className="space-y-3">
+                <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
+                  <div className="flex items-center gap-3">
+                    <Server className="h-4 w-4 text-blue-600" />
+                    <span className="font-semibold text-slate-800 dark:text-slate-200">Serveurs Cloud Privé (Belgique)</span>
+                  </div>
+                  <span className="font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-950 px-2.5 py-1 rounded-full">
+                    100% Opérationnel
+                  </span>
+                </div>
+
+                <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
+                  <div className="flex items-center gap-3">
+                    <HardDrive className="h-4 w-4 text-emerald-600" />
+                    <span className="font-semibold text-slate-800 dark:text-slate-200">Sauvegarde Automatique Hors-Site</span>
+                  </div>
+                  <span className="font-bold text-slate-600 dark:text-slate-400">
+                    Dernier check : Aujourd'hui à 04h00
+                  </span>
+                </div>
+
+                <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
+                  <div className="flex items-center gap-3">
+                    <ShieldCheck className="h-4 w-4 text-indigo-600" />
+                    <span className="font-semibold text-slate-800 dark:text-slate-200">Tentatives d'Intrusion Bloquées (30j)</span>
+                  </div>
+                  <span className="font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950 px-2.5 py-1 rounded-full">
+                    1 420 Attaques Neutralisées
+                  </span>
+                </div>
+              </div>
+
+              <div className="p-4 rounded-2xl bg-blue-50/50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900/50 text-xs text-slate-600 dark:text-slate-300 flex items-center gap-2.5">
+                <Zap className="h-4 w-4 text-blue-600 shrink-0" />
+                <span><em>Demande d'évolution : demandez un nouvel accès ou une extension en 1 clic depuis votre espace.</em></span>
+              </div>
+
+            </div>
+
+          </div>
+        </section>
+    );
+}

src/features/landing/ComparativeSection.tsx

@@ -0,0 +1,57 @@
+import { Check, X } from "lucide-react";
+
+export default function ComparativeSection(){
+    return(
+        <section id="comparatif" className="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16 space-y-2">
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+              Pourquoi choisir GISE plutôt qu'un prestataire classique ?
+            </h2>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Les dépanneurs traditionnels interviennent quand la panne est là. GISE prend un engagement de responsabilité.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* Classique */}
+            <div className="p-8 rounded-[28px] bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 space-y-4">
+              <h3 className="font-bold text-slate-500 text-xs uppercase tracking-wider">Prestataire Classique</h3>
+              <ul className="space-y-3.5 text-xs text-slate-600 dark:text-slate-400 font-medium">
+                <li className="flex items-start gap-2.5">
+                  <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                  <span>Intervention réactive (dépanne une fois la panne survenue)</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                  <span>Données hébergées à l'étranger sans garantie de confidentialité</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                  <span>Facture mensuelle floue sans vision sur les menaces bloquées</span>
+                </li>
+              </ul>
+            </div>
+
+            {/* GISE */}
+            <div className="p-8 rounded-[28px] bg-blue-50 dark:bg-blue-950 border-2 border-blue-600/40 space-y-4 relative">
+
+              <h3 className="font-bold text-blue-600 dark:text-blue-400 text-xs uppercase tracking-wider">Offre GISE & AEGIS</h3>
+              <ul className="space-y-3.5 text-xs text-slate-800 dark:text-slate-200 font-semibold">
+                <li className="flex items-start gap-2.5">
+                  <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <span>Gestion proactive et surveillance 24h/24 pour éviter les pannes</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <span>Serveurs et sauvegardes 100% situés physiquement en Belgique</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <span>Tableau de bord AEGIS en temps réel pour une transparence totale</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+    );
+}

src/features/landing/ContactSection.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { CheckCircle, User, Building, Mail, MessageSquare } from 'lucide-react';
+
+export default function ContactSection() {
+  const [formStatus, setFormStatus] = useState<'idle' | 'submitting' | 'success'>('idle');
+
+  return (
+    <section id="contact" className="py-24 bg-white dark:bg-slate-900 border-t border-slate-200/80 dark:border-slate-800 transition-colors">
+      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
+
+        <div className="text-center mb-12 space-y-2">
+          <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+            Demandez votre diagnostic
+          </h2>
+          <p className="text-slate-600 dark:text-slate-400 text-sm">
+            Un premier bilan rapide de votre infrastructure, sans engagement.
+          </p>
+        </div>
+
+        {formStatus === 'success' ? (
+          <div className="bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 p-8 rounded-[28px] text-center space-y-3">
+            <CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
+            <h3 className="text-xl font-bold text-slate-900 dark:text-white">Demande bien reçue !</h3>
+            <p className="text-xs text-slate-600 dark:text-slate-300 max-w-md mx-auto">
+              Merci. Un spécialiste GISE étudiera vos besoins et vous recontactera très rapidement.
+            </p>
+            <button
+              onClick={() => setFormStatus('idle')}
+              className="mt-4 text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline"
+            >
+              Envoyer un autre message
+            </button>
+          </div>
+        ) : (
+          <form
+            onSubmit={async (event) => {
+              event.preventDefault();
+              setFormStatus('submitting');
+
+              const formData = new FormData(event.currentTarget);
+              // Remplacement de la clé par la variable d'environnement
+              formData.append("access_key", import.meta.env.VITE_WEB3FORMS_KEY);
+              formData.append("subject", "Demande de diagnostic (Site GISE)");
+
+              try {
+                const response = await fetch(import.meta.env.VITE_URL_API_WEB3FORMS, {
+                  method: "POST",
+                  body: formData
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                  setFormStatus('success');
+                } else {
+                  setFormStatus('idle');
+                  alert("Erreur lors de l'envoi : " + data.message);
+                }
+              } catch (error) {
+                setFormStatus('idle');
+                alert("Erreur de connexion. Veuillez réessayer.");
+              }
+            }}
+            className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px] shadow-sm"
+          >
+            <div className="grid sm:grid-cols-2 gap-4">
+              {/* CHAMP NOM */}
+              <div>
+                <label htmlFor="name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                  Nom & Prénom
+                </label>
+                <div className="relative">
+                  <input
+                    required
+                    type="text"
+                    id="name"
+                    name="name"
+                    className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                    placeholder="Jean Dupont"
+                  />
+                  <User className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                </div>
+              </div>
+
+              {/* CHAMP SOCIÉTÉ */}
+              <div>
+                <label htmlFor="company" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                  Société / Cabinet
+                </label>
+                <div className="relative">
+                  <input
+                    required
+                    type="text"
+                    id="company"
+                    name="company"
+                    className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                    placeholder="Cabinet Dupont & Associés"
+                  />
+                  <Building className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid sm:grid-cols-2 gap-4">
+              {/* CHAMP EMAIL */}
+              <div>
+                <label htmlFor="email" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                  Email professionnel
+                </label>
+                <div className="relative">
+                  <input
+                    required
+                    type="email"
+                    id="email"
+                    name="email"
+                    className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                    placeholder="jean@dupont-avocats.be"
+                  />
+                  <Mail className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                </div>
+              </div>
+
+              {/* CHAMP SELECT */}
+              <div>
+                <label htmlFor="size" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                  Taille du parc informatique
+                </label>
+                <select
+                  id="size"
+                  name="taille_parc"
+                  className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                >
+                  <option value="5 à 15 postes">5 à 15 postes</option>
+                  <option value="15 à 50 postes">15 à 50 postes</option>
+                  <option value="Plus de 50 postes">Plus de 50 postes</option>
+                </select>
+              </div>
+            </div>
+
+            {/* CHAMP MESSAGE */}
+            <div>
+              <label htmlFor="message" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                Votre besoin principal
+              </label>
+              <div className="relative">
+                <textarea
+                  required
+                  id="message"
+                  name="message"
+                  rows={4}
+                  className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs resize-none transition-all"
+                  placeholder="Décrivez brièvement votre informatique actuelle..."
+                />
+                <MessageSquare className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+              </div>
+            </div>
+
+            {/* Protection Anti-spam native de Web3Forms */}
+            <input type="checkbox" name="botcheck" className="hidden" style={{ display: 'none' }} />
+
+            {/* BOUTON SUBMIT */}
+            <button
+              disabled={formStatus === 'submitting'}
+              type="submit"
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 rounded-full transition-all flex items-center justify-center gap-2 shadow-sm disabled:opacity-70 text-xs active:scale-95"
+            >
+              {formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic'}
+            </button>
+          </form>
+        )}
+      </div>
+    </section>
+  );
+}

src/features/landing/EngagementsSection.tsx

@@ -0,0 +1,74 @@
+import { Activity, Check, Server, ShieldCheck } from "lucide-react";
+
+export default function EngagementsSection() {
+    return (
+        <section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+                <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
+                    <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
+                        Prise en charge globale
+                    </span>
+                    <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+                        Les 3 piliers de votre tranquillité informatique
+                    </h2>
+                    <p className="text-slate-600 dark:text-slate-400 text-sm">
+                        Nous assumons la responsabilité technique complète de vos équipements et de vos données.
+                    </p>
+                </div>
+
+                <div className="grid md:grid-cols-3 gap-6">
+
+                    {/* Pilier 1 */}
+                    <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
+                        <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
+                            <Server className="h-6 w-6" />
+                        </div>
+                        <h3 className="text-xl font-bold text-slate-900 dark:text-white">1. Cloud Privé Souverain & Accès Sécurisé</h3>
+                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                            Vos logiciels et fichiers sont hébergés sur nos propres serveurs <strong>100% situés en Belgique</strong>. Vos équipes travaillent depuis le bureau ou à distance en toute sécurité.
+                        </p>
+                        <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Données confidentielles conservées en Belgique</li>
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Accès à distance simple et rapide pour vos employés</li>
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Protection contre le vol ou la perte de documents</li>
+                        </ul>
+                    </div>
+
+                    {/* Pilier 2 */}
+                    <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
+                        <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
+                            <ShieldCheck className="h-6 w-6" />
+                        </div>
+                        <h3 className="text-xl font-bold text-slate-900 dark:text-white">2. Protection Anti-Piratage & Sauvegardes</h3>
+                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                            Vos réseaux sont protégés contre les virus et le chantage au chiffrement. Vos fichiers essentiels sont <strong>sauvegardés automatiquement hors-site</strong>.
+                        </p>
+                        <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Blocage automatique des attaques et piratages</li>
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Sauvegardes quotidiennes isolées et sécurisées</li>
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Restauration de vos fichiers en cas de problème</li>
+                        </ul>
+                    </div>
+
+                    {/* Pilier 3 */}
+                    <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
+                        <div className="h-12 w-12 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
+                            <Activity className="h-6 w-6" />
+                        </div>
+                        <h3 className="text-xl font-bold text-slate-900 dark:text-white">3. Supervision 24/7 & Assistance VIP</h3>
+                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                            Nous surveillons l'état de votre matériel en continu pour <strong>anticiper et corriger les pannes</strong>. Vous bénéficiez d'un contact direct avec votre spécialiste.
+                        </p>
+                        <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Surveillance permanente de vos serveurs</li>
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interventions préventives avant le blocage</li>
+                            <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interlocuteur dédié sans répondeur ni robot</li>
+                        </ul>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    );
+}

src/features/landing/HeroSection.tsx

@@ -0,0 +1,64 @@
+import { CheckCircle, ChevronRight, Sparkles } from "lucide-react";
+
+export default function HeroSection() {
+    return (
+        <section className="pt-36 pb-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto flex flex-col items-center text-center">
+
+            {/* Google Pill Chip */}
+            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#edf2fa] dark:bg-slate-900 border border-blue-100 dark:border-slate-800 text-xs text-blue-700 dark:text-blue-300 font-medium mb-8">
+                <Sparkles className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />
+                <span>Infogérance & Cybersécurité Souveraine en Belgique</span>
+            </div>
+
+            {/* H1 Main Heading */}
+            <h1 className="text-4xl sm:text-6xl md:text-7xl font-bold text-slate-900 dark:text-white tracking-tight mb-6 max-w-4xl leading-[1.15]">
+                Concentrez-vous sur votre métier.{' '}
+                <span className="text-blue-600 dark:text-blue-400">
+                    Nous gérons votre informatique.
+                </span>
+            </h1>
+
+            {/* Subtitle */}
+            <p className="text-base sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mb-10 leading-relaxed font-normal">
+                GISE prend la responsabilité globale de votre infrastructure, de vos réseaux et de votre sécurité. Libérez votre entreprise des pannes grâce à notre Cloud souverain et à notre portail AEGIS.
+            </p>
+
+            {/* Action Buttons (Google Material Pills) */}
+            <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+                <a
+                    href="#contact"
+                    className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
+                >
+                    <span>Obtenir un diagnostic</span>
+                    <ChevronRight className="w-4 h-4" />
+                </a>
+                <a
+                    href="#aegis"
+                    className="px-8 py-3.5 text-sm font-semibold rounded-full text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/80 transition-all flex items-center justify-center shadow-sm"
+                >
+                    Explorer le Portail AEGIS
+                </a>
+            </div>
+
+            {/* Feature Pill Tags */}
+            <div className="mt-16 pt-8 border-t border-slate-200/80 dark:border-slate-800/80 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-slate-600 dark:text-slate-400 w-full max-w-3xl">
+                <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+                    <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+                    <span>100% Hébergé en Belgique</span>
+                </div>
+                <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+                    <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+                    <span>Sauvegardes Inviolables</span>
+                </div>
+                <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+                    <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+                    <span>Accès Nomade Sécurisé</span>
+                </div>
+                <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+                    <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+                    <span>Supervision 24/7 Proactive</span>
+                </div>
+            </div>
+        </section>
+    );
+}

src/features/landing/SectorsSection.tsx

@@ -0,0 +1,67 @@
+import { Calculator, Scale, Stethoscope } from "lucide-react";
+
+export default function SectorsSection (){
+    return(
+        <section id="secteurs" className="py-20 bg-white/60 dark:bg-slate-900/85 border-t border-slate-200/80 dark:border-slate-800/80">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
+              <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
+                Secteurs Privilégiés
+              </span>
+              <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+                Adapté aux exigences de votre profession
+              </h2>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-6">
+
+              {/* Avocats */}
+              <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center">
+                  <Scale className="w-6 h-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Cabinets d'Avocats & Notaires</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  <strong>Secret professionnel :</strong> Connexion chiffrée à distance depuis les tribunaux. Garantie de confidentialité absolue pour vos pièces de procédure.
+                </p>
+                <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Coffre-fort chiffré</span>
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Accès Nomade</span>
+                </div>
+              </div>
+
+              {/* Comptables */}
+              <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
+                  <Calculator className="w-6 h-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Fiduciaires & Comptables</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  <strong>Sérénité pendant les clôtures :</strong> Protection contre les blocages malveillants de vos fichiers comptables. Zéro mauvaise surprise fiscale.
+                </p>
+                <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Sauvegardes Inviolables</span>
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Uptime Garantit</span>
+                </div>
+              </div>
+
+              {/* Santé */}
+              <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
+                  <Stethoscope className="w-6 h-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Cliniques Privées & Santé</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  <strong>Données de santé :</strong> Protection renforcée de vos dossiers patients et de vos ordinateurs de consultation contre les intrusions.
+                </p>
+                <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Données Protégées</span>
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Réseau Isolé</span>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </section>
+    );
+}