change design

src/pages/ConditionsGenerales.tsx

@@ -1,25 +1,41 @@
-import { Shield, ArrowLeft, FileText, Briefcase, Lock, Scale, Moon, Sun } from 'lucide-react';
+import React from 'react';
+import { 
+  Shield, 
+  ArrowLeft, 
+  FileText, 
+  Briefcase, 
+  Lock, 
+  Scale, 
+  Moon, 
+  Sun,
+  FileCheck 
+} from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../hooks/useTheme';
 
 export default function ConditionsGenerales() {
   const { isDark, toggleTheme } = useTheme();
+
   return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
-      
-      {/* HEADER DE NAVIGATION */}
-      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
-          <Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
+    <div className="min-h-screen font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">
+
+      {/* HEADER DE NAVIGATION (Style Google Pill Bar) */}
+      <header className="sticky top-0 z-40 p-3 sm:p-4">
+        <div className="max-w-5xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
+          
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-xs font-semibold px-3.5 py-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800"
+          >
             <ArrowLeft className="w-4 h-4" />
-            Retour à l'accueil
+            <span>Retour à l'accueil</span>
           </Link>
 
-          <div className="flex items-center gap-6">
+          <div className="flex items-center gap-3">
             {/* BOUTON THEME */}
             <button
               onClick={toggleTheme}
-              className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
+              className="p-2.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
               aria-label="Basculer le thème"
             >
               {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
@@ -27,72 +43,117 @@ export default function ConditionsGenerales() {
 
             {/* LOGO */}
             <div className="flex items-center gap-2">
-              <Shield className="h-6 w-6 text-gise-accent" />
-              <span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
+              <div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
+                <Shield className="h-4 w-4" />
+              </div>
+              <span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
+                GISE
+              </span>
             </div>
           </div>
         </div>
       </header>
 
-      {/* CONTENU */}
-      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-        
-        <div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
-          <h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Conditions Générales de Services (CGS)</h1>
-          <p className="text-slate-500 dark:text-slate-400">
-            Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
-          </p>
+      {/* CONTENU PRINCIPAL */}
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
+
+        {/* Header Titre */}
+        <div className="mb-10 space-y-3">
+          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
+            <FileCheck className="w-3.5 h-3.5" />
+            <span>Cadre Contractuel</span>
+          </div>
+          <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
+            Conditions Générales de Services (CGS)
+          </h1>
+          <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 pt-1">
+            <span className="px-2.5 py-0.5 rounded-full bg-slate-200/60 dark:bg-slate-800 font-medium">
+              Mise à jour : {new Date().toLocaleDateString('fr-BE')}
+            </span>
+          </div>
         </div>
 
-        <div className="space-y-12 leading-relaxed text-sm">
+        <div className="space-y-6">
 
-          <section>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <FileText className="w-5 h-5 text-gise-accent" />
-              Objet
-            </h2>
-            <p>
-              Les présentes CGS ont pour objet de définir les conditions dans lesquelles GISE fournit au Client ses services informatiques d'audit, d'infogérance et de cybersécurité.
+          {/* SECTION 1 - OBJET */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
+                <FileText className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                1. Objet des services
+              </h2>
+            </div>
+            
+            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+              Les présentes Conditions Générales de Services (CGS) ont pour objet de définir le cadre contractuel dans lequel GISE SRL fournit au Client ses services informatiques d'audit d'infrastructure, d'infogérance souveraine, d'hébergement privé et de cybersécurité.
             </p>
           </section>
 
-          <section>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <Briefcase className="w-5 h-5 text-gise-accent" />
-              Obligation de moyens
-            </h2>
-            <p>
-              Dans le domaine de la cybersécurité, GISE est tenue à une <strong>obligation de moyens</strong> et non de résultat concernant la protection contre les cyberattaques.
+          {/* SECTION 2 - OBLIGATION DE MOYENS */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
+                <Briefcase className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                2. Engagements & Obligation de moyens
+              </h2>
+            </div>
+
+            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+              Dans le domaine de la cybersécurité et des infrastructures informatiques, GISE déploie les meilleures pratiques du secteur et s'engage à une <strong className="text-slate-900 dark:text-white font-semibold">obligation de moyens renforcée</strong>. Nous mettons en œuvre l'ensemble des mesures techniques, organisationnelles et matérielles nécessaires pour garantir la santé, la disponibilité et la protection du système d'information du Client.
             </p>
           </section>
 
-          <section className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <Lock className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
-              Secret professionnel et Confidentialité
-            </h2>
-            <p>
-              GISE s'engage à la plus stricte confidentialité concernant toutes les informations et données confidentielles auxquelles elle pourrait avoir accès lors de l'exécution de ses Services.
+          {/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
+          <section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 shadow-sm space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
+                <Lock className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                3. Secret professionnel et Confidentialité
+              </h2>
+            </div>
+
+            <p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
+              GISE s'engage à observer le <strong className="font-semibold text-slate-900 dark:text-white">secret professionnel le plus strict</strong> concernant l'ensemble des informations, données, fichiers et documents confidentiels auxquels elle pourrait avoir accès dans le cadre de l'exécution de ses prestations.
             </p>
           </section>
 
-          <section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
-            <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
-              <Scale className="w-5 h-5" />
-              Droit applicable
-            </h2>
-            <p>
-              Les présentes Conditions Générales sont régies exclusivement par le <strong>droit belge</strong>. Les tribunaux de l'arrondissement judiciaire de Bruxelles seront seuls compétents en cas de litige.
+          {/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
+                <Scale className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                4. Droit applicable et juridiction compétente
+              </h2>
+            </div>
+
+            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+              Les présentes Conditions Générales de Services sont régies exclusivement par le droit belge.
             </p>
+
+            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs text-slate-700 dark:text-slate-300 space-y-1.5">
+              <p className="font-bold text-slate-900 dark:text-white text-sm">Juridiction exclusive</p>
+              <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+                En cas de litige relatif à l'interprétation, la validité ou l'exécution des présentes CGS, et à défaut de résolution amiable, les <strong className="text-slate-900 dark:text-white font-medium">tribunaux de l'arrondissement judiciaire de Bruxelles</strong> seront seuls compétents.
+              </p>
+            </div>
           </section>
 
         </div>
       </main>
 
       {/* FOOTER */}
-      <footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
-        <p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
+      <footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
+        <p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
       </footer>
+
     </div>
   );
 }