Merge pull request 'Test' (#1) from test into master
Deploy GISE landing page / build-and-deploy (push) Successful in 17s
Deploy GISE landing page / build-and-deploy (push) Successful in 17s
Reviewed-on: maximus/landing-page-GISE#1
This commit was merged in pull request #1.
This commit is contained in:
maximus
@@ -41,7 +41,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Déploiement FTP (10.10.40.12)
|
- name: Déploiement FTP (10.10.40.12)
|
||||||
env:
|
env:
|
||||||
FTP_USER: ${{ secrets.FTP_USER_TEST }} # Le compte FTP enfermé dans aegis.gise.be
|
FTP_USER: ${{ secrets.FTP_USER_TEST }}
|
||||||
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD_TEST }}
|
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD_TEST }}
|
||||||
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
||||||
run: |
|
run: |
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Déploiement FTP (10.10.40.12)
|
- name: Déploiement FTP (10.10.40.12)
|
||||||
env:
|
env:
|
||||||
FTP_USER: ${{ secrets.FTP_USER }} # Le compte FTP enfermé dans aegis.gise.be
|
FTP_USER: ${{ secrets.FTP_USER }}
|
||||||
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
|
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
|
||||||
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
||||||
run: |
|
run: |
|
||||||
|
|||||||
+32
-5
@@ -1,13 +1,40 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="fr-BE" class="scroll-smooth">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>landing-page-gise</title>
|
|
||||||
|
<title>GISE | Expertise en Cybersécurité & Infogérance Souveraine</title>
|
||||||
|
<meta name="description" content="GISE protège le patrimoine numérique des cabinets d'avocats, cliniques privées et fiduciaires. Architecture Zero-Trust, infogérance B2B et hébergement souverain en Belgique." />
|
||||||
|
<meta name="keywords" content="cybersécurité, infogérance, protection des données, RGPD, Zero-Trust, Proxmox, hébergement souverain, Belgique, B2B" />
|
||||||
|
<meta name="author" content="GISE SRL" />
|
||||||
|
<meta name="robots" content="index, follow" />
|
||||||
|
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/logo-gise.svg" />
|
||||||
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||||
|
|
||||||
|
<meta name="theme-color" content="#0f172a" /> <meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://www.gise.be/" />
|
||||||
|
<meta property="og:title" content="GISE | Cabinet d'Expertise en Cybersécurité" />
|
||||||
|
<meta property="og:description" content="Sécurisez vos infrastructures critiques avec une exigence absolue. Découvrez nos solutions sur-mesure pour professionnels." />
|
||||||
|
<meta property="og:image" content="https://www.gise.be/og-image.jpg" />
|
||||||
|
<meta property="og:site_name" content="GISE" />
|
||||||
|
<meta property="og:locale" content="fr_BE" />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
try {
|
||||||
|
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50 transition-colors duration-300">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,159 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useTheme } from '../hooks/useTheme';
|
||||||
|
|
||||||
|
export const AnimatedSvgBackground: React.FC = () => {
|
||||||
|
const { isDark } = useTheme();
|
||||||
|
const [scrollY, setScrollY] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
setScrollY(window.scrollY);
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Couleurs réactives selon le mode clair/sombre
|
||||||
|
const strokePrimary = isDark ? "rgba(59, 130, 246, 0.25)" : "rgba(37, 99, 235, 0.18)"; // Bleu Google
|
||||||
|
const strokeSuccess = isDark ? "rgba(16, 185, 129, 0.3)" : "rgba(16, 185, 129, 0.22)"; // Vert Émeraude
|
||||||
|
const strokeSubtle = isDark ? "rgba(148, 163, 184, 0.1)" : "rgba(100, 116, 139, 0.08)";
|
||||||
|
const fillGlow = isDark ? "rgba(59, 130, 246, 0.03)" : "rgba(37, 99, 235, 0.02)";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden bg-[#f8f9fa] dark:bg-[#0f172a] transition-colors duration-500">
|
||||||
|
|
||||||
|
{/* ------------------------------------------------------------- */}
|
||||||
|
{/* COUCHE 1 : GRILLE TECHNIQUE & FLUX LENTS (Vitesse: -0.1x) */}
|
||||||
|
{/* ------------------------------------------------------------- */}
|
||||||
|
<svg
|
||||||
|
className="absolute inset-0 w-full h-[200vh] transition-transform duration-75 ease-out"
|
||||||
|
style={{ transform: `translateY(${scrollY * -0.1}px)` }}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern id="gise-grid" width="80" height="80" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 80 0 L 0 0 0 80" fill="none" stroke={strokeSubtle} strokeWidth="1" />
|
||||||
|
<circle cx="80" cy="0" r="1.5" fill={strokePrimary} />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#gise-grid)" />
|
||||||
|
|
||||||
|
{/* Lignes de flux de données sinusoïdales */}
|
||||||
|
<path
|
||||||
|
d="M -100 200 C 300 100, 600 500, 1200 300 T 2000 600"
|
||||||
|
fill="none"
|
||||||
|
stroke={strokePrimary}
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeDasharray="8 6"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M -100 800 C 400 600, 800 1100, 1500 900 T 2200 1200"
|
||||||
|
fill="none"
|
||||||
|
stroke={strokeSuccess}
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeDasharray="12 8"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* ------------------------------------------------------------- */}
|
||||||
|
{/* COUCHE 2 : SYMBOLES CLÉS GISE (BOUCLIER, SERVEUR, CADENAS) */}
|
||||||
|
{/* Vitesse intermédiaire: -0.28x */}
|
||||||
|
{/* ------------------------------------------------------------- */}
|
||||||
|
<svg
|
||||||
|
className="absolute inset-0 w-full h-[250vh] transition-transform duration-75 ease-out"
|
||||||
|
style={{ transform: `translateY(${scrollY * -0.28}px)` }}
|
||||||
|
viewBox="0 0 1200 1800"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
|
||||||
|
{/* --- DESSIN 1 : LE BOUCLIER SOUVERAIN (AEGIS) en haut à droite --- */}
|
||||||
|
<g transform="translate(850, 120) scale(1.2)">
|
||||||
|
{/* Contour externe du Bouclier */}
|
||||||
|
<path
|
||||||
|
d="M100 20 L180 50 V120 C180 170 100 210 100 210 C100 210 20 170 20 120 V50 L100 20 Z"
|
||||||
|
stroke={strokePrimary}
|
||||||
|
strokeWidth="2.5"
|
||||||
|
fill={fillGlow}
|
||||||
|
/>
|
||||||
|
{/* Maillage interne Zero-Trust */}
|
||||||
|
<path d="M100 20 V210 M20 50 L180 120 M180 50 L20 120" stroke={strokePrimary} strokeWidth="1" />
|
||||||
|
<circle cx="100" cy="115" r="25" stroke={strokeSuccess} strokeWidth="2" fill="none" />
|
||||||
|
<circle cx="100" cy="115" r="6" fill={isDark ? "#10b981" : "#059669"} />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* --- DESSIN 2 : BAIE DE SERVEURS (CLOUD BELGE) au milieu à gauche --- */}
|
||||||
|
<g transform="translate(80, 650) scale(0.9)">
|
||||||
|
{/* Armoire Serveur */}
|
||||||
|
<rect x="0" y="0" width="160" height="240" rx="16" stroke={strokePrimary} strokeWidth="2" fill={fillGlow} />
|
||||||
|
{/* Serveur Lame 1 */}
|
||||||
|
<rect x="15" y="20" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
<circle cx="35" cy="37.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
|
||||||
|
<line x1="55" y1="37.5" x2="125" y2="37.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
|
||||||
|
|
||||||
|
{/* Serveur Lame 2 */}
|
||||||
|
<rect x="15" y="70" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
<circle cx="35" cy="87.5" r="3" fill={isDark ? "#3b82f6" : "#2563eb"} />
|
||||||
|
<line x1="55" y1="87.5" x2="125" y2="87.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="6 3" />
|
||||||
|
|
||||||
|
{/* Serveur Lame 3 */}
|
||||||
|
<rect x="15" y="120" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
<circle cx="35" cy="137.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
|
||||||
|
<line x1="55" y1="137.5" x2="125" y2="137.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
|
||||||
|
|
||||||
|
{/* Base & Connexion terre */}
|
||||||
|
<path d="M80 160 V220 M40 220 H120" stroke={strokeSuccess} strokeWidth="2" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* --- DESSIN 3 : CADENAS DE SÉCURITÉ / VAULT en bas à droite --- */}
|
||||||
|
<g transform="translate(900, 1250) scale(1.1)">
|
||||||
|
{/* Anse du cadenas */}
|
||||||
|
<path d="M30 60 V35 C30 18 43 5 60 5 C77 5 90 18 90 35 V60" stroke={strokeSuccess} strokeWidth="3" fill="none" />
|
||||||
|
{/* Corps du cadenas */}
|
||||||
|
<rect x="10" y="60" width="100" height="80" rx="16" stroke={strokeSuccess} strokeWidth="2.5" fill={fillGlow} />
|
||||||
|
{/* Serrure */}
|
||||||
|
<circle cx="60" cy="92" r="8" fill={isDark ? "#10b981" : "#059669"} />
|
||||||
|
<path d="M60 100 V115" stroke={isDark ? "#10b981" : "#059669"} strokeWidth="3" strokeLinecap="round" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* --- DESSIN 4 : NŒUDS DE RÉSEAU INTERCONNECTÉS (Réseau Zero-Trust) --- */}
|
||||||
|
<g transform="translate(450, 950)">
|
||||||
|
<line x1="0" y1="0" x2="120" y2="-60" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
<line x1="120" y1="-60" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
<line x1="0" y1="0" x2="100" y2="80" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
<line x1="100" y1="80" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
|
||||||
|
|
||||||
|
<circle cx="0" cy="0" r="8" fill={isDark ? "#3b82f6" : "#2563eb"} />
|
||||||
|
<circle cx="120" cy="-60" r="6" fill={isDark ? "#10b981" : "#059669"} />
|
||||||
|
<circle cx="240" cy="20" r="10" stroke={strokePrimary} strokeWidth="2" fill={isDark ? "#0f172a" : "#ffffff"} />
|
||||||
|
<circle cx="100" cy="80" r="7" fill={isDark ? "#6366f1" : "#4f46e5"} />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* ------------------------------------------------------------- */}
|
||||||
|
{/* COUCHE 3 : HALOS LUMINEUX EN ACCENTUATION (Vitesse: -0.4x) */}
|
||||||
|
{/* ------------------------------------------------------------- */}
|
||||||
|
<div
|
||||||
|
className="absolute top-20 left-1/2 -translate-x-1/2 w-175 h-87.5 bg-blue-500/10 dark:bg-blue-600/15 blur-[140px] rounded-full transition-transform duration-75 ease-out"
|
||||||
|
style={{ transform: `translate(-50%, ${scrollY * -0.4}px)` }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="absolute top-200 -left-20 w-125 h-125 bg-emerald-500/10 dark:bg-emerald-500/15 blur-[150px] rounded-full transition-transform duration-75 ease-out"
|
||||||
|
style={{ transform: `translateY(${scrollY * -0.2}px)` }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AnimatedSvgBackground;
|
||||||
@@ -1,25 +1,40 @@
|
|||||||
import { Shield, ArrowLeft, FileText, Briefcase, Lock, Scale, Moon, Sun } from 'lucide-react';
|
import {
|
||||||
|
Shield,
|
||||||
|
ArrowLeft,
|
||||||
|
FileText,
|
||||||
|
Briefcase,
|
||||||
|
Lock,
|
||||||
|
Scale,
|
||||||
|
Moon,
|
||||||
|
Sun,
|
||||||
|
FileCheck
|
||||||
|
} from 'lucide-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTheme } from '../hooks/useTheme';
|
import { useTheme } from '../hooks/useTheme';
|
||||||
|
|
||||||
export default function ConditionsGenerales() {
|
export default function ConditionsGenerales() {
|
||||||
const { isDark, toggleTheme } = useTheme();
|
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 */}
|
return (
|
||||||
<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="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">
|
||||||
<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">
|
{/* 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" />
|
<ArrowLeft className="w-4 h-4" />
|
||||||
Retour à l'accueil
|
<span>Retour à l'accueil</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-3">
|
||||||
{/* BOUTON THEME */}
|
{/* BOUTON THEME */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleTheme}
|
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"
|
aria-label="Basculer le thème"
|
||||||
>
|
>
|
||||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||||
@@ -27,72 +42,117 @@ export default function ConditionsGenerales() {
|
|||||||
|
|
||||||
{/* LOGO */}
|
{/* LOGO */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Shield className="h-6 w-6 text-gise-accent" />
|
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* CONTENU */}
|
{/* CONTENU PRINCIPAL */}
|
||||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||||
|
|
||||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
{/* Header Titre */}
|
||||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Conditions Générales de Services (CGS)</h1>
|
<div className="mb-10 space-y-3">
|
||||||
<p className="text-slate-500 dark:text-slate-400">
|
<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">
|
||||||
Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
<FileCheck className="w-3.5 h-3.5" />
|
||||||
</p>
|
<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>
|
||||||
|
|
||||||
<div className="space-y-12 leading-relaxed text-sm">
|
<div className="space-y-6">
|
||||||
|
|
||||||
<section>
|
{/* SECTION 1 - OBJET */}
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<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">
|
||||||
<FileText className="w-5 h-5 text-gise-accent" />
|
<div className="flex items-center gap-3">
|
||||||
1. Objet
|
<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>
|
</h2>
|
||||||
<p>
|
</div>
|
||||||
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é.
|
|
||||||
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
{/* SECTION 2 - OBLIGATION DE MOYENS */}
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<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">
|
||||||
<Briefcase className="w-5 h-5 text-gise-accent" />
|
<div className="flex items-center gap-3">
|
||||||
2. Obligation de moyens
|
<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>
|
</h2>
|
||||||
<p>
|
</div>
|
||||||
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.
|
|
||||||
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
{/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<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">
|
||||||
<Lock className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
|
<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é
|
3. Secret professionnel et Confidentialité
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
</div>
|
||||||
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.
|
|
||||||
|
<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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
|
{/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
|
||||||
<h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
|
<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" />
|
<Scale className="w-5 h-5" />
|
||||||
4. Droit applicable
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
4. Droit applicable et juridiction compétente
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
</div>
|
||||||
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.
|
|
||||||
|
<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>
|
</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>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* FOOTER */}
|
{/* 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">
|
<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. Tous droits réservés.</p>
|
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
+556
-175
@@ -1,7 +1,31 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Shield, Server, Lock, ChevronRight, Activity, Network, Briefcase, Stethoscope, FileText, CheckCircle, Moon, Sun } from 'lucide-react';
|
import {
|
||||||
|
Shield,
|
||||||
|
Server,
|
||||||
|
Lock,
|
||||||
|
ChevronRight,
|
||||||
|
Activity,
|
||||||
|
CheckCircle,
|
||||||
|
Moon,
|
||||||
|
Sun,
|
||||||
|
Scale,
|
||||||
|
Calculator,
|
||||||
|
Stethoscope,
|
||||||
|
Sparkles,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
MessageSquare,
|
||||||
|
Building,
|
||||||
|
Mail,
|
||||||
|
User,
|
||||||
|
ArrowUpRight,
|
||||||
|
HardDrive,
|
||||||
|
ShieldCheck,
|
||||||
|
Zap
|
||||||
|
} from 'lucide-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTheme } from '../hooks/useTheme';
|
import { useTheme } from '../hooks/useTheme';
|
||||||
|
import AnimatedSvgBackground from '../components/AnimatedSvBackground';
|
||||||
|
|
||||||
export default function GiseLandingPage() {
|
export default function GiseLandingPage() {
|
||||||
const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
|
const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
|
||||||
@@ -9,7 +33,6 @@ export default function GiseLandingPage() {
|
|||||||
|
|
||||||
// --- GESTION DU MODE CLAIR/SOMBRE ---
|
// --- GESTION DU MODE CLAIR/SOMBRE ---
|
||||||
const { isDark, toggleTheme } = useTheme();
|
const { isDark, toggleTheme } = useTheme();
|
||||||
// -------------------------------------
|
|
||||||
|
|
||||||
// --- LOGIQUE DES COOKIES ---
|
// --- LOGIQUE DES COOKIES ---
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -42,261 +65,619 @@ export default function GiseLandingPage() {
|
|||||||
document.cookie = "gise_cookie_consent=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
document.cookie = "gise_cookie_consent=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||||
setCookieConsent(null);
|
setCookieConsent(null);
|
||||||
};
|
};
|
||||||
// ---------------------------
|
|
||||||
|
|
||||||
const handleContactSubmit = (e: React.SubmitEvent) => {
|
const handleContactSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setFormStatus('submitting');
|
setFormStatus('submitting');
|
||||||
setTimeout(() => setFormStatus('success'), 1500);
|
setTimeout(() => setFormStatus('success'), 1500);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen font-sans selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
<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">
|
||||||
|
|
||||||
{/* NAVIGATION */}
|
<AnimatedSvgBackground />
|
||||||
<nav className="fixed w-full z-40 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 transition-colors duration-300">
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="relative z-10">
|
||||||
<div className="flex justify-between items-center h-20">
|
|
||||||
<div className="flex items-center gap-2">
|
{/* NAVBAR (Style Google Bar avec conteneur arrondi flottant) */}
|
||||||
<Shield className="h-8 w-8 text-gise-accent" />
|
<header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
|
||||||
<span className="text-2xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
<div className="max-w-7xl 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">
|
||||||
|
|
||||||
|
{/* Brand Logo - Google Style Icon */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="h-9 w-9 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||||
|
<Shield className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-baseline gap-1.5">
|
||||||
|
<span className="text-xl font-bold tracking-tight text-slate-900 dark:text-white">
|
||||||
|
GISE
|
||||||
|
</span>
|
||||||
|
<span className="text-[11px] font-semibold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/80 px-2.5 py-0.5 rounded-full border border-blue-200/50 dark:border-blue-800/50">
|
||||||
|
Cloud Souverain
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:flex space-x-8 text-sm font-medium text-slate-600 dark:text-slate-300">
|
|
||||||
<a href="#expertise" className="hover:text-gise-accent dark:hover:text-white transition-colors">Expertise</a>
|
|
||||||
<a href="#solutions" className="hover:text-gise-accent dark:hover:text-white transition-colors">Solutions</a>
|
|
||||||
<a href="#industries" className="hover:text-gise-accent dark:hover:text-white transition-colors">Secteurs</a>
|
|
||||||
<a href="#contact" className="hover:text-gise-accent dark:hover:text-white transition-colors">Contact</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-4">
|
{/* Nav Links (Material Chips Navigation) */}
|
||||||
{/* BOUTON TOGGLE THEME */}
|
<nav className="hidden md:flex items-center gap-1 font-medium text-xs text-slate-600 dark:text-slate-300">
|
||||||
<button
|
<a href="#engagements" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||||
onClick={toggleTheme}
|
Nos Engagements
|
||||||
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"
|
</a>
|
||||||
aria-label="Basculer le thème"
|
<a href="#aegis" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||||
>
|
Portail AEGIS
|
||||||
{isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
</a>
|
||||||
</button>
|
<a href="#secteurs" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||||
|
Secteurs
|
||||||
<a href="#contact" className="hidden md:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gise-accent hover:bg-gise-accentHover transition-colors">
|
</a>
|
||||||
Réponse à Incident
|
<a href="#comparatif" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||||
|
Pourquoi GISE
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* HERO SECTION */}
|
{/* Action buttons */}
|
||||||
<section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col items-center text-center">
|
<div className="flex items-center gap-2">
|
||||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-200 dark:bg-slate-800/50 border border-slate-300 dark:border-slate-700 text-sm text-slate-700 dark:text-slate-300 mb-8 transition-colors">
|
<button
|
||||||
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
onClick={toggleTheme}
|
||||||
<span>Cabinet d'Expertise en Cybersécurité B2B</span>
|
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" />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#contact"
|
||||||
|
className="px-5 py-2 rounded-full text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-sm active:scale-95 flex items-center gap-1.5"
|
||||||
|
>
|
||||||
|
<span>Demander un audit</span>
|
||||||
|
<ArrowUpRight className="w-3.5 h-3.5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* HERO SECTION (Style Google Launch Header) */}
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6 transition-colors">
|
{/* H1 Main Heading */}
|
||||||
Protégez votre patrimoine numérique <br className="hidden md:block"/> avec une exigence <span className="text-transparent bg-clip-text bg-linear-to-r from-blue-600 to-gise-accent dark:from-blue-400 dark:to-gise-accent">absolue.</span>
|
<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>
|
</h1>
|
||||||
|
|
||||||
<p className="mt-4 text-xl text-slate-600 dark:text-slate-400 max-w-3xl mb-10 transition-colors">
|
{/* Subtitle */}
|
||||||
Nous concevons, infogérons et sécurisons les infrastructures informatiques des cabinets d'avocats, cliniques privées et fiduciaires. Hébergement souverain et confidentialité totale de vos données.
|
<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>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4">
|
{/* Action Buttons (Google Material Pills) */}
|
||||||
<a href="#contact" className="px-8 py-4 text-base font-bold rounded-md text-white bg-gise-accent hover:bg-gise-accentHover transition-all flex items-center justify-center gap-2">
|
<div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
|
||||||
Demander un Audit <ChevronRight className="w-5 h-5" />
|
<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>
|
||||||
<a href="#solutions" className="px-8 py-4 text-base font-medium rounded-md text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all flex items-center justify-center">
|
<a
|
||||||
Découvrir nos Solutions
|
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>
|
</a>
|
||||||
</div>
|
</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>
|
</section>
|
||||||
|
|
||||||
{/* EXPERTISE */}
|
{/* --- SECTION NOS ENGAGEMENTS (Material Design 3 Surface Cards) --- */}
|
||||||
<section id="expertise" className="py-20 bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors">
|
<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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Notre Expertise Fondamentale</h2>
|
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||||
<p className="text-slate-600 dark:text-slate-400">Le socle de votre tranquillité d'esprit numérique.</p>
|
<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>
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
|
||||||
{[
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
{ icon: Activity, title: "Audit & Cartographie", desc: "Diagnostic approfondi de votre architecture, analyse des vulnérabilités de surface et rapport d'impact stratégique." },
|
|
||||||
{ icon: Server, title: "Refonte Cloud Privé", desc: "Migration de vos serveurs vétustes vers nos hyperviseurs Bare-Metal souverains, infogérés en circuit fermé." },
|
{/* Pilier 1 */}
|
||||||
{ icon: Lock, title: "Infogérance & Monitoring", desc: "Supervision 24/7 de vos nœuds de calcul, support premium et réponse aux incidents en temps réel." }
|
<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">
|
||||||
].map((item, i) => (
|
<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">
|
||||||
<div key={i} className="bg-white dark:bg-slate-800 p-8 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-gise-accent dark:hover:border-gise-accent transition-colors">
|
<Server className="h-6 w-6" />
|
||||||
<item.icon className="h-10 w-10 text-gise-accent mb-6" />
|
|
||||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">{item.title}</h3>
|
|
||||||
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">{item.desc}</p>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* SOLUTIONS */}
|
{/* --- SECTION PORTAIL AEGIS (Style Google Workspace / Admin Center) --- */}
|
||||||
<section id="solutions" className="py-24 bg-white dark:bg-slate-950 relative overflow-hidden transition-colors">
|
<section id="aegis" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-200 h-200 bg-gise-accent/10 blur-[120px] rounded-full pointer-events-none"></div>
|
<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">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
Transparence Totale
|
||||||
<div className="mb-16">
|
</span>
|
||||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Des Solutions Technologiques Sur-Mesure</h2>
|
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||||
<p className="text-slate-600 dark:text-slate-400 max-w-2xl">Au-delà du conseil, nous déployons pour vous des environnements numériques ultra-sécurisés, vous garantissant un contrôle absolu sur vos données et vos communications.</p>
|
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>
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-2 gap-12">
|
<div className="grid lg:grid-cols-12 gap-8 items-center">
|
||||||
{/* Portail VIP */}
|
|
||||||
<div className="bg-linear-to-br from-slate-200 dark:from-slate-800 to-slate-100 dark:to-slate-900 p-1 rounded-2xl">
|
{/* Feature List Left (5 cols) */}
|
||||||
<div className="bg-white dark:bg-slate-900 h-full p-8 md:p-12 rounded-xl transition-colors">
|
<div className="lg:col-span-5 space-y-3">
|
||||||
<div className="flex items-center gap-3 mb-6">
|
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||||
<Shield className="h-8 w-8 text-emerald-500 dark:text-emerald-400" />
|
<div className="flex items-center gap-3 mb-1">
|
||||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white">Espace Client & Coffre-Fort</h3>
|
<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>
|
</div>
|
||||||
<p className="text-lg text-slate-700 dark:text-slate-300 mb-8">Un portail privé dédié à la réassurance et à la gestion de vos actifs les plus sensibles.</p>
|
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Suivi de Santé & Disponibilité</h4>
|
||||||
<ul className="space-y-4 text-slate-600 dark:text-slate-400">
|
</div>
|
||||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5" /> <span>Tableau de bord de suivi en temps réel de la santé de vos serveurs (Uptime, Charge).</span></li>
|
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5" /> <span>Stockage chiffré de bout en bout pour vos mots de passe et documents confidentiels.</span></li>
|
Visualisez l'état de marche de vos serveurs et de vos accès avec des indicateurs vert émeraude simples à lire.
|
||||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5" /> <span>Canal de communication direct et hermétique avec votre ingénieur dédié.</span></li>
|
</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>
|
||||||
|
|
||||||
|
{/* --- SECTEURS D'ACTIVITÉ (Google Material Category Cards) --- */}
|
||||||
|
<section id="secteurs" className="py-20 bg-white dark:bg-slate-900/40 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>
|
||||||
|
|
||||||
|
{/* --- SECTION COMPARATIVE (Google Comparison Style) --- */}
|
||||||
|
<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/60 dark:bg-blue-950/30 border-2 border-blue-600/40 space-y-4 relative">
|
||||||
|
<span className="absolute -top-3 right-6 bg-blue-600 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-0.5 rounded-full shadow-sm">
|
||||||
|
Recommandé
|
||||||
|
</span>
|
||||||
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Réseau */}
|
|
||||||
<div className="bg-linear-to-br from-slate-200 dark:from-slate-800 to-slate-100 dark:to-slate-900 p-1 rounded-2xl">
|
|
||||||
<div className="bg-white dark:bg-slate-900 h-full p-8 md:p-12 rounded-xl transition-colors">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<Network className="h-8 w-8 text-blue-500 dark:text-blue-400" />
|
|
||||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white">Architecture Réseau Zero-Trust</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-lg text-slate-700 dark:text-slate-300 mb-8">L'interconnexion inviolable de vos différentes succursales et infrastructures.</p>
|
|
||||||
<ul className="space-y-4 text-slate-600 dark:text-slate-400">
|
|
||||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400 shrink-0 mt-0.5" /> <span>Réseau segmenté interdisant par défaut toute connexion non authentifiée (Zero-Trust).</span></li>
|
|
||||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400 shrink-0 mt-0.5" /> <span>Tunnels VPN privés (WireGuard) rendant vos flux invisibles sur internet.</span></li>
|
|
||||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400 shrink-0 mt-0.5" /> <span>Filtrage de flux applicatif et pare-feu d'entreprise de dernière génération.</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* INDUSTRIES */}
|
{/* FORMULAIRE DE CONTACT (Google Forms Outlined Material Style) */}
|
||||||
<section id="industries" className="py-20 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors">
|
<section id="contact" className="py-24 bg-white dark:bg-slate-900/60 border-t border-slate-200/80 dark:border-slate-800">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h2 className="text-3xl font-bold text-center text-slate-900 dark:text-white mb-16">Des solutions pensées pour les données critiques</h2>
|
|
||||||
<div className="grid md:grid-cols-3 gap-6 text-center">
|
|
||||||
<div className="p-6">
|
|
||||||
<Briefcase className="w-12 h-12 text-slate-400 dark:text-slate-500 mx-auto mb-4" />
|
|
||||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2">Cabinets d'Avocats</h4>
|
|
||||||
<p className="text-slate-600 dark:text-slate-400 text-sm">Secret professionnel garanti par des environnements de stockage étanches.</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-6">
|
|
||||||
<Stethoscope className="w-12 h-12 text-slate-400 dark:text-slate-500 mx-auto mb-4" />
|
|
||||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2">Cliniques Privées</h4>
|
|
||||||
<p className="text-slate-600 dark:text-slate-400 text-sm">Protection absolue et souveraineté des données de santé à caractère personnel.</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-6">
|
|
||||||
<FileText className="w-12 h-12 text-slate-400 dark:text-slate-500 mx-auto mb-4" />
|
|
||||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2">Fiduciaires & Comptables</h4>
|
|
||||||
<p className="text-slate-600 dark:text-slate-400 text-sm">Continuité de service et intégrité totale des flux financiers de vos clients.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* CONTACT */}
|
<div className="text-center mb-12 space-y-2">
|
||||||
<section id="contact" className="py-24 bg-white dark:bg-slate-950 transition-colors">
|
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
Demandez votre diagnostic offert
|
||||||
<div className="text-center mb-12">
|
</h2>
|
||||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Entrons en contact</h2>
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||||
<p className="text-slate-600 dark:text-slate-400">Pour un audit de sécurité ou une urgence, notre équipe vous répond sous 2 heures.</p>
|
Un premier bilan rapide de votre infrastructure, sans aucun engagement.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{formStatus === 'success' ? (
|
{formStatus === 'success' ? (
|
||||||
<div className="bg-emerald-100 dark:bg-emerald-900/30 border border-emerald-300 dark:border-emerald-500/50 p-8 rounded-xl text-center">
|
<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-16 h-16 text-emerald-500 dark:text-emerald-400 mx-auto mb-4" />
|
<CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
|
||||||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">Message Envoyé</h3>
|
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Demande bien reçue !</h3>
|
||||||
<p className="text-emerald-800 dark:text-emerald-200">Nos experts ont bien reçu votre demande et vous recontacteront dans les plus brefs délais.</p>
|
<p className="text-xs text-slate-600 dark:text-slate-300 max-w-md mx-auto">
|
||||||
<button onClick={() => setFormStatus('idle')} className="mt-6 text-sm text-emerald-600 dark:text-emerald-400 hover:underline">Envoyer un autre message</button>
|
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 hover:underline"
|
||||||
|
>
|
||||||
|
Envoyer un autre message
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleContactSubmit} className="space-y-6">
|
<form onSubmit={handleContactSubmit} className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px]">
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
|
||||||
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="name" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nom complet</label>
|
<label htmlFor="name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||||
<input required type="text" id="name" className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent" placeholder="Jean Dupont" />
|
Nom & Prénom
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="text"
|
||||||
|
id="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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="company" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Entreprise / Cabinet</label>
|
<label htmlFor="company" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||||
<input required type="text" id="company" className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent" placeholder="Cabinet Dupont & Associés" />
|
Société / Cabinet
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="text"
|
||||||
|
id="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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email professionnel</label>
|
<label htmlFor="email" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||||
<input required type="email" id="email" className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent" placeholder="jean@cabinet-dupont.fr" />
|
Email professionnel
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="email"
|
||||||
|
id="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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="message" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Votre besoin</label>
|
<label htmlFor="size" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||||
<textarea required id="message" rows={4} className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent resize-none" placeholder="Décrivez brièvement votre infrastructure ou l'incident en cours..."></textarea>
|
Taille du parc informatique
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="size"
|
||||||
|
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>5 à 15 postes</option>
|
||||||
|
<option>15 à 50 postes</option>
|
||||||
|
<option>Plus de 50 postes</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button disabled={formStatus === 'submitting'} type="submit" className="w-full bg-gise-accent hover:bg-gise-accentHover text-white font-bold py-4 rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-70">
|
</div>
|
||||||
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Envoyer la demande'}
|
|
||||||
|
<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"
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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 offert'}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* FOOTER */}
|
{/* FOOTER (Style Google Corporate Minimal Footer) */}
|
||||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-12 mt-12 transition-colors">
|
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-10 text-xs text-slate-600 dark:text-slate-400">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center md:items-start gap-8 mb-8">
|
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
<div className="flex items-center gap-2">
|
||||||
<Shield className="h-8 w-8 text-slate-400 dark:text-slate-700" />
|
<div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
||||||
<span className="text-2xl font-bold tracking-wider text-slate-400 dark:text-slate-700">GISE</span>
|
<Shield className="h-3.5 w-3.5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap justify-center md:justify-end gap-x-8 gap-y-4 text-sm font-medium text-slate-500 dark:text-slate-400">
|
<span className="font-bold text-slate-900 dark:text-white text-sm">GISE SRL</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center gap-x-6 gap-y-2 font-medium">
|
||||||
<Link to="/mentions-legales" className="hover:text-slate-900 dark:hover:text-white transition-colors">Mentions Légales</Link>
|
<Link to="/mentions-legales" className="hover:text-slate-900 dark:hover:text-white transition-colors">Mentions Légales</Link>
|
||||||
<Link to="/politique-confidentialite" className="hover:text-slate-900 dark:hover:text-white transition-colors">Politique de Confidentialité</Link>
|
<Link to="/politique-confidentialite" className="hover:text-slate-900 dark:hover:text-white transition-colors">Confidentialité</Link>
|
||||||
<Link to="/politique-cookies" className="hover:text-slate-900 dark:hover:text-white transition-colors">Politique des Cookies</Link>
|
<Link to="/politique-cookies" className="hover:text-slate-900 dark:hover:text-white transition-colors">Cookies</Link>
|
||||||
<button onClick={handleResetCookies} className="hover:text-slate-900 dark:hover:text-white transition-colors text-left underline decoration-slate-400 dark:decoration-slate-600 underline-offset-4">Gérer mes cookies</button>
|
<button onClick={handleResetCookies} className="hover:text-slate-900 dark:hover:text-white underline underline-offset-4">Gérer mes cookies</button>
|
||||||
<Link to="/cgs" className="hover:text-slate-900 dark:hover:text-white transition-colors">Conditions Générales (CGS)</Link>
|
<Link to="/cgs" className="hover:text-slate-900 dark:hover:text-white transition-colors">CGS</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-8 border-t border-slate-200 dark:border-slate-900/50 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500 dark:text-slate-600">
|
|
||||||
<p className="flex items-center gap-1">
|
<div className="pt-4 border-t border-slate-200/60 dark:border-slate-900 flex flex-col sm:flex-row justify-between items-center gap-2 text-[11px] text-slate-500">
|
||||||
<Server className="w-3 h-3" />
|
<p className="flex items-center gap-1.5">
|
||||||
Infrastructure souveraine hébergée en Belgique (UE).
|
<Server className="w-3.5 h-3.5 text-blue-600" />
|
||||||
|
Infrastructure souveraine 100% hébergée en Belgique.
|
||||||
</p>
|
</p>
|
||||||
<p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
|
<p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
{/* COOKIE BANNER */}
|
{/* COOKIE BANNER (Google Bottom Toast Style) */}
|
||||||
{cookieConsent === null && (
|
{cookieConsent === null && (
|
||||||
<div className="fixed bottom-0 left-0 right-0 p-4 z-50 animate-in slide-in-from-bottom-10 fade-in duration-500">
|
<div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-6 sm:max-w-sm z-50 animate-in slide-in-from-bottom-6 duration-300">
|
||||||
<div className="max-w-5xl mx-auto bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-2xl rounded-lg p-6 flex flex-col sm:flex-row items-center justify-between gap-6 transition-colors">
|
<div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl rounded-3xl p-5 space-y-3">
|
||||||
<div className="flex-1">
|
<div className="space-y-1">
|
||||||
<h4 className="text-slate-900 dark:text-white font-bold mb-2">Gestion de vos données (RGPD)</h4>
|
<h4 className="text-xs font-bold text-slate-900 dark:text-white">Respect de votre vie privée</h4>
|
||||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
<p className="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
GISE utilise uniquement des cookies strictement nécessaires au fonctionnement du site et à la sécurité de votre navigation. Aucun traceur publicitaire ou de revente de données n'est déployé sur nos environnements.
|
GISE utilise uniquement des cookies strictement nécessaires au fonctionnement du site et à la sécurité. Aucun traceur publicitaire n'est déployé.
|
||||||
<Link to="/politique-cookies" className="text-gise-accent hover:text-blue-600 dark:hover:text-blue-400 hover:underline ml-2 transition-colors">
|
|
||||||
Lire notre politique
|
|
||||||
</Link>.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-3 shrink-0">
|
<div className="flex justify-end gap-2 pt-1">
|
||||||
<button onClick={handleRefuseCookies} className="px-6 py-2 text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white border border-slate-300 dark:border-slate-600 rounded hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
|
<button
|
||||||
|
onClick={handleRefuseCookies}
|
||||||
|
className="px-4 py-2 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors"
|
||||||
|
>
|
||||||
Refuser
|
Refuser
|
||||||
</button>
|
</button>
|
||||||
<button onClick={handleAcceptCookies} className="px-6 py-2 text-sm font-medium text-white bg-gise-accent hover:bg-gise-accentHover rounded transition-colors">
|
<button
|
||||||
|
onClick={handleAcceptCookies}
|
||||||
|
className="px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-full transition-colors"
|
||||||
|
>
|
||||||
Accepter
|
Accepter
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,25 +1,30 @@
|
|||||||
import { Shield, ArrowLeft, Building, Mail, Phone, Server, FileCheck, Moon, Sun } from 'lucide-react';
|
import { Shield, ArrowLeft, Mail, Server, FileCheck, Moon, Sun, Lock } from 'lucide-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTheme } from '../hooks/useTheme';
|
import { useTheme } from '../hooks/useTheme';
|
||||||
|
|
||||||
export default function MentionsLegales() {
|
export default function MentionsLegales() {
|
||||||
const { isDark, toggleTheme } = useTheme();
|
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 */}
|
return (
|
||||||
<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="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">
|
||||||
<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">
|
{/* 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" />
|
<ArrowLeft className="w-4 h-4" />
|
||||||
Retour à l'accueil
|
<span>Retour à l'accueil</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-3">
|
||||||
{/* BOUTON THEME */}
|
{/* BOUTON THEME */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleTheme}
|
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"
|
aria-label="Basculer le thème"
|
||||||
>
|
>
|
||||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||||
@@ -27,105 +32,103 @@ export default function MentionsLegales() {
|
|||||||
|
|
||||||
{/* LOGO */}
|
{/* LOGO */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Shield className="h-6 w-6 text-gise-accent" />
|
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* CONTENU PRINCIPAL */}
|
{/* CONTENU PRINCIPAL */}
|
||||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||||
|
|
||||||
{/* Titre */}
|
{/* Header Titre */}
|
||||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
<div className="mb-10 space-y-3">
|
||||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Mentions Légales</h1>
|
<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">
|
||||||
<p className="text-slate-600 dark:text-slate-400">
|
<FileCheck className="w-3.5 h-3.5" />
|
||||||
|
<span>Informations Réglementaires</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
|
||||||
|
Mentions Légales
|
||||||
|
</h1>
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
|
||||||
Informations légales obligatoires relatives à l'éditeur et à l'hébergeur du site web GISE, conformément au Code de droit économique belge.
|
Informations légales obligatoires relatives à l'éditeur et à l'hébergeur du site web GISE, conformément au Code de droit économique belge.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-12 leading-relaxed">
|
<div className="space-y-6">
|
||||||
|
|
||||||
{/* SECTION 1 */}
|
{/* SECTION 1 - COORDONNÉES DE CONTACT */}
|
||||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
<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">
|
||||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Building className="w-6 h-6 text-gise-accent" />
|
<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">
|
||||||
1. Éditeur du site
|
<Mail className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
1. Coordonnées de contact
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid sm:grid-cols-2 gap-6 text-sm">
|
|
||||||
<div>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Dénomination sociale</p>
|
|
||||||
<p className="font-semibold text-slate-900 dark:text-white">GISE SRL</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Forme juridique</p>
|
|
||||||
<p className="font-semibold text-slate-900 dark:text-white">Société à Responsabilité Limitée</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Siège social</p>
|
|
||||||
<p className="font-semibold text-slate-900 dark:text-white">Rue Exemple 123, 1000 Bruxelles, Belgique</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Numéro d'entreprise (BCE)</p>
|
|
||||||
<p className="font-semibold text-slate-900 dark:text-white">0123.456.789</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Numéro de TVA</p>
|
|
||||||
<p className="font-semibold text-slate-900 dark:text-white">BE 0123.456.789</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wider mb-1">Éditeur responsable</p>
|
|
||||||
<p className="font-semibold text-slate-900 dark:text-white">Direction GISE</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* SECTION 2 */}
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez contacter l'équipe GISE :
|
||||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
|
||||||
<Mail className="w-6 h-6 text-gise-accent" />
|
|
||||||
2. Coordonnées de contact
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4 text-sm text-slate-600 dark:text-slate-400">
|
|
||||||
Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez nous contacter :
|
|
||||||
</p>
|
</p>
|
||||||
<ul className="space-y-3 text-sm">
|
|
||||||
<li className="flex items-center gap-3">
|
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80 inline-block w-full sm:w-auto">
|
||||||
<Mail className="w-4 h-4 text-slate-400 dark:text-slate-500" />
|
<div className="flex items-center gap-2.5 text-xs sm:text-sm text-slate-800 dark:text-slate-200">
|
||||||
<span><strong className="text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
<Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
|
||||||
</li>
|
<span><strong className="font-semibold text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
||||||
<li className="flex items-center gap-3">
|
</div>
|
||||||
<Phone className="w-4 h-4 text-slate-400 dark:text-slate-500" />
|
</div>
|
||||||
<span><strong className="text-slate-900 dark:text-white">Téléphone :</strong> +32 (0)2 123 45 67</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* SECTION 3 */}
|
{/* SECTION 2 - HÉBERGEMENT DU SITE */}
|
||||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
<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">
|
||||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Server className="w-6 h-6 text-gise-accent" />
|
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||||
3. Hébergement du site
|
<Server className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
2. Hébergement du site
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-sm mb-4">
|
</div>
|
||||||
|
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
Conformément à nos engagements de souveraineté numérique et de protection des données B2B :
|
Conformément à nos engagements de souveraineté numérique et de protection des données B2B :
|
||||||
</p>
|
</p>
|
||||||
<div className="bg-slate-100 dark:bg-slate-950 p-4 rounded-lg border border-slate-200 dark:border-slate-800 text-sm space-y-2 transition-colors">
|
|
||||||
<p><strong className="text-slate-900 dark:text-white">Hébergeur :</strong> Infrastructure privée GISE (Bare-Metal Proxmox)</p>
|
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs sm:text-sm space-y-2.5 text-slate-700 dark:text-slate-300">
|
||||||
<p><strong className="text-slate-900 dark:text-white">Localisation des serveurs :</strong> Centre de données sécurisé situé en Belgique (Union Européenne)</p>
|
<p className="flex items-center gap-2">
|
||||||
<p><strong className="text-slate-900 dark:text-white">Protection réseau :</strong> Cloudflare & Pare-feu d'entreprise OPNsense</p>
|
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||||
|
<span><strong className="font-semibold text-slate-900 dark:text-white">Hébergeur :</strong> Infrastructure privée GISE</span>
|
||||||
|
</p>
|
||||||
|
<p className="flex items-center gap-2">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||||
|
<span><strong className="font-semibold text-slate-900 dark:text-white">Localisation des serveurs :</strong> Centre de données situé en Belgique (Union Européenne)</span>
|
||||||
|
</p>
|
||||||
|
<p className="flex items-center gap-2">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||||
|
<span><strong className="font-semibold text-slate-900 dark:text-white">Protection réseau :</strong> Cloudflare & Pare-feu OPNsense</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* SECTION 4 */}
|
{/* SECTION 3 - PROPRIÉTÉ INTELLECTUELLE */}
|
||||||
<section className="space-y-4">
|
<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">
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<FileCheck className="w-5 h-5 text-gise-accent" />
|
<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">
|
||||||
4. Propriété intellectuelle
|
<Lock className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
3. Propriété intellectuelle
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
</div>
|
||||||
L'ensemble du contenu présent sur le site web GISE (textes, graphismes, logos, icônes, éléments visuels, structure du site) est la propriété exclusive de GISE SRL, sauf mention contraire.
|
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
|
L'ensemble du contenu présent sur le site web GISE (textes, graphismes, logos, icônes, éléments visuels, structure du site) est la propriété exclusive de GISE SRL, sauf mention contraire. Toute reproduction ou représentation totale ou partielle est interdite sans autorisation préalable.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -133,8 +136,8 @@ export default function MentionsLegales() {
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* FOOTER */}
|
{/* 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">
|
<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. Tous droits réservés.</p>
|
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,25 +1,43 @@
|
|||||||
import { Shield, ArrowLeft, Lock, Database, UserCheck, Scale, Server, Moon, Sun } from 'lucide-react';
|
import {
|
||||||
|
Shield,
|
||||||
|
ArrowLeft,
|
||||||
|
Database,
|
||||||
|
UserCheck,
|
||||||
|
Scale,
|
||||||
|
Server,
|
||||||
|
Moon,
|
||||||
|
Sun,
|
||||||
|
ShieldCheck,
|
||||||
|
Lock,
|
||||||
|
Mail,
|
||||||
|
ExternalLink
|
||||||
|
} from 'lucide-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTheme } from '../hooks/useTheme';
|
import { useTheme } from '../hooks/useTheme';
|
||||||
|
|
||||||
export default function PolitiqueConfidentialite() {
|
export default function PolitiqueConfidentialite() {
|
||||||
const { isDark, toggleTheme } = useTheme();
|
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 */}
|
return (
|
||||||
<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="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">
|
||||||
<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">
|
{/* 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" />
|
<ArrowLeft className="w-4 h-4" />
|
||||||
Retour à l'accueil
|
<span>Retour à l'accueil</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-3">
|
||||||
{/* BOUTON THEME */}
|
{/* BOUTON THEME */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleTheme}
|
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"
|
aria-label="Basculer le thème"
|
||||||
>
|
>
|
||||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||||
@@ -27,115 +45,178 @@ export default function PolitiqueConfidentialite() {
|
|||||||
|
|
||||||
{/* LOGO */}
|
{/* LOGO */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Shield className="h-6 w-6 text-gise-accent" />
|
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* CONTENU */}
|
{/* CONTENU PRINCIPAL */}
|
||||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||||
|
|
||||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
{/* Header Titre */}
|
||||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Politique de Confidentialité</h1>
|
<div className="mb-10 space-y-3">
|
||||||
<p className="text-slate-500 dark:text-slate-400">
|
<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">
|
||||||
Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
<ShieldCheck className="w-3.5 h-3.5" />
|
||||||
</p>
|
<span>Protection des Données & RGPD</span>
|
||||||
<p className="text-slate-600 dark:text-slate-400 mt-4 leading-relaxed">
|
</div>
|
||||||
En tant que cabinet d'expertise en cybersécurité, la protection de vos données personnelles n'est pas seulement une obligation légale (RGPD), c'est le cœur de notre métier et de notre engagement envers vous.
|
<h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
|
||||||
|
Politique de Confidentialité
|
||||||
|
</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>
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl pt-2">
|
||||||
|
En tant que cabinet d'expertise en cybersécurité, la protection de vos données personnelles n'est pas seulement une obligation légale, c'est le cœur de notre métier et de notre engagement de souveraineté.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-12 leading-relaxed text-sm">
|
<div className="space-y-6">
|
||||||
|
|
||||||
{/* SECTION 1 */}
|
{/* SECTION 1 - DONNÉES COLLECTÉES ET FINALITÉS */}
|
||||||
<section>
|
<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-5">
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<Lock className="w-5 h-5 text-gise-accent" />
|
<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">
|
||||||
1. Responsable du traitement
|
<Database className="w-5 h-5" />
|
||||||
</h2>
|
|
||||||
<div className="bg-white dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-800 space-y-1 transition-colors">
|
|
||||||
<p><strong className="text-slate-900 dark:text-white">GISE SRL</strong></p>
|
|
||||||
<p>Rue Exemple 123, 1000 Bruxelles, Belgique</p>
|
|
||||||
<p>BCE : 0123.456.789</p>
|
|
||||||
<p>E-mail : privacy@gise.be</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
1. Données collectées et finalités
|
||||||
{/* SECTION 2 */}
|
|
||||||
<section>
|
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
|
||||||
<Database className="w-5 h-5 text-gise-accent" />
|
|
||||||
2. Données collectées et finalités
|
|
||||||
</h2>
|
</h2>
|
||||||
<div className="space-y-4">
|
</div>
|
||||||
<div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
|
||||||
<h3 className="font-bold text-slate-900 dark:text-white mb-2">A. Formulaire de contact et demandes d'audit</h3>
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
|
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
|
||||||
<li><strong>Données :</strong> Nom, e-mail professionnel, entreprise, contenu du message.</li>
|
<h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
|
||||||
<li><strong>Finalité :</strong> Répondre à vos demandes ou établir un devis.</li>
|
<Mail className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||||
|
Formulaires & Demandes d'audit
|
||||||
|
</h3>
|
||||||
|
<ul className="text-xs text-slate-600 dark:text-slate-400 space-y-1.5 leading-relaxed">
|
||||||
|
<li><strong className="text-slate-800 dark:text-slate-200">Données :</strong> Nom, e-mail professionnel, nom de l'entreprise, taille du parc, message.</li>
|
||||||
|
<li><strong className="text-slate-800 dark:text-slate-200">Finalité :</strong> Répondre à vos demandes de diagnostic ou établir un devis d'infogérance.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
|
||||||
<h3 className="font-bold text-slate-900 dark:text-white mb-2">B. Sécurité du site et infrastructure</h3>
|
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
|
||||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
|
<h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
|
||||||
<li><strong>Données :</strong> Adresse IP, logs de connexion, agent utilisateur.</li>
|
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||||
<li><strong>Finalité :</strong> Détecter et prévenir les cyberattaques.</li>
|
Sécurité & Infrastructure
|
||||||
|
</h3>
|
||||||
|
<ul className="text-xs text-slate-600 dark:text-slate-400 space-y-1.5 leading-relaxed">
|
||||||
|
<li><strong className="text-slate-800 dark:text-slate-200">Données :</strong> Adresse IP anonymisée, logs de connexion, agent navigateur.</li>
|
||||||
|
<li><strong className="text-slate-800 dark:text-slate-200">Finalité :</strong> Prévenir les tentatives d'intrusion et garantir la stabilité du site.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* SECTION 3 */}
|
{/* SECTION 2 - HÉBERGEMENT ET PARTAGE DES DONNÉES */}
|
||||||
<section>
|
<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">
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<Server className="w-5 h-5 text-gise-accent" />
|
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||||
3. Hébergement et partage des données
|
<Server className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
2. Hébergement et non-partage des données
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mb-3">
|
</div>
|
||||||
Vos données ne sont <strong>jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales.
|
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
|
Vos données personnelles ne sont <strong className="text-slate-900 dark:text-white font-semibold">jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales ou publicitaires.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
Toutes les données collectées via ce site sont hébergées sur nos propres serveurs physiques (Bare-Metal) localisés en <strong>Belgique</strong>.
|
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs sm:text-sm space-y-2 text-slate-700 dark:text-slate-300">
|
||||||
|
<p className="flex items-center gap-2 font-semibold text-slate-900 dark:text-white">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||||
|
Hébergement 100% Souverain Belge
|
||||||
</p>
|
</p>
|
||||||
|
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-4">
|
||||||
|
Toutes les données collectées au travers de nos formulaires et de la plateforme AEGIS sont hébergées sur notre propre infrastructure physique (Bare-Metal) localisée en Belgique, à l'abri du <em>Cloud Act</em> américain.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* SECTION 4 */}
|
{/* SECTION 3 - VOS DROITS (RGPD) */}
|
||||||
<section>
|
<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-5">
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<UserCheck className="w-5 h-5 text-gise-accent" />
|
<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">
|
||||||
4. Vos droits (Conformité RGPD)
|
<UserCheck className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
3. Vos droits (Conformité RGPD)
|
||||||
</h2>
|
</h2>
|
||||||
<ul className="grid sm:grid-cols-2 gap-3 mb-4">
|
</div>
|
||||||
<li className="bg-white dark:bg-slate-900 p-3 rounded border border-slate-200 dark:border-slate-800 transition-colors"><strong className="text-slate-900 dark:text-white">Droit d'accès :</strong> Obtenir une copie de vos données.</li>
|
|
||||||
<li className="bg-white dark:bg-slate-900 p-3 rounded border border-slate-200 dark:border-slate-800 transition-colors"><strong className="text-slate-900 dark:text-white">Droit de rectification :</strong> Corriger des données inexactes.</li>
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
</ul>
|
Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez d'un contrôle total sur vos données :
|
||||||
<p>
|
|
||||||
Pour exercer ces droits, contactez notre DPO : <strong>privacy@gise.be</strong>.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 text-xs">
|
||||||
|
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80">
|
||||||
|
<strong className="text-slate-900 dark:text-white font-semibold block mb-1">Droit d'accès & d'export</strong>
|
||||||
|
<span className="text-slate-600 dark:text-slate-400">Obtenir une copie complète de l'ensemble de vos données en notre possession.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80">
|
||||||
|
<strong className="text-slate-900 dark:text-white font-semibold block mb-1">Droit de rectification & d'effacement</strong>
|
||||||
|
<span className="text-slate-600 dark:text-slate-400">Corriger des informations inexactes ou demander la suppression définitive de vos données.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2 flex flex-col sm:flex-row items-start sm:items-center gap-3 p-4 rounded-2xl bg-blue-50/60 dark:bg-blue-950/30 border border-blue-200/50 dark:border-blue-900/50 text-xs">
|
||||||
|
<Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
|
||||||
|
<span className="text-slate-700 dark:text-slate-300">
|
||||||
|
Pour exercer l'un de ces droits, contactez notre Délégué à la Protection des Données (DPO) : <strong className="font-semibold text-slate-900 dark:text-white">privacy@gise.be</strong>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* SECTION 5 */}
|
{/* SECTION 4 - AUTORITÉ DE CONTRÔLE */}
|
||||||
<section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
|
<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">
|
||||||
<h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
|
<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" />
|
<Scale className="w-5 h-5" />
|
||||||
5. Réclamation auprès de l'autorité de contrôle
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
|
4. Réclamation auprès de l'autorité de contrôle
|
||||||
</h2>
|
</h2>
|
||||||
<address className="not-italic text-slate-600 dark:text-slate-400">
|
</div>
|
||||||
<strong>Autorité de protection des données (Belgique)</strong><br />
|
|
||||||
Rue de la Presse, 35, 1000 Bruxelles<br />
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
Site web : <a href="https://www.autoriteprotectiondonnees.be" target="_blank" rel="noopener noreferrer" className="text-gise-accent hover:underline">www.autoriteprotectiondonnees.be</a>
|
Si vous estimez que le traitement de vos données ne respecte pas le cadre légal belge et européen, vous pouvez introduire une réclamation auprès de l'autorité compétente :
|
||||||
</address>
|
</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">Autorité de Protection des Données (APD)</p>
|
||||||
|
<p>Rue de la Presse, 35 — 1000 Bruxelles, Belgique</p>
|
||||||
|
<p className="pt-1">
|
||||||
|
<a
|
||||||
|
href="https://www.autoriteprotectiondonnees.be"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 font-semibold text-blue-600 dark:text-blue-400 hover:underline"
|
||||||
|
>
|
||||||
|
<span>www.autoriteprotectiondonnees.be</span>
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* FOOTER */}
|
{/* 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">
|
<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. Tous droits réservés.</p>
|
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
+113
-51
@@ -1,25 +1,38 @@
|
|||||||
import { Shield, ArrowLeft, Cookie, Info, CheckCircle, Moon, Sun } from 'lucide-react';
|
import {
|
||||||
|
Shield,
|
||||||
|
ArrowLeft,
|
||||||
|
Cookie,
|
||||||
|
Info,
|
||||||
|
CheckCircle,
|
||||||
|
Moon,
|
||||||
|
Sun
|
||||||
|
} from 'lucide-react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTheme } from '../hooks/useTheme';
|
import { useTheme } from '../hooks/useTheme';
|
||||||
|
|
||||||
export default function PolitiqueCookies() {
|
export default function PolitiqueCookies() {
|
||||||
const { isDark, toggleTheme } = useTheme();
|
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 */}
|
return (
|
||||||
<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="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">
|
||||||
<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">
|
{/* 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" />
|
<ArrowLeft className="w-4 h-4" />
|
||||||
Retour à l'accueil
|
<span>Retour à l'accueil</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-3">
|
||||||
{/* BOUTON THEME */}
|
{/* BOUTON THEME */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleTheme}
|
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"
|
aria-label="Basculer le thème"
|
||||||
>
|
>
|
||||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||||
@@ -27,72 +40,120 @@ export default function PolitiqueCookies() {
|
|||||||
|
|
||||||
{/* LOGO */}
|
{/* LOGO */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Shield className="h-6 w-6 text-gise-accent" />
|
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* CONTENU */}
|
{/* CONTENU PRINCIPAL */}
|
||||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||||
|
|
||||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
{/* Header Titre */}
|
||||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4 flex items-center gap-4">
|
<div className="mb-10 space-y-3">
|
||||||
<Cookie className="w-10 h-10 text-gise-accent" />
|
<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">
|
||||||
|
<Cookie className="w-3.5 h-3.5" />
|
||||||
|
<span>Respect de la vie privée</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
|
||||||
Politique des Cookies
|
Politique des Cookies
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-slate-500 dark:text-slate-400">
|
<div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 pt-1">
|
||||||
Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
<span className="px-2.5 py-0.5 rounded-full bg-slate-200/60 dark:bg-slate-800 font-medium">
|
||||||
</p>
|
Mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-12 leading-relaxed text-sm">
|
<div className="space-y-6">
|
||||||
|
|
||||||
<section>
|
{/* SECTION 1 - QU'EST-CE QU'UN COOKIE */}
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<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">
|
||||||
<Info className="w-5 h-5 text-gise-accent" />
|
<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">
|
||||||
|
<Info className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
1. Qu'est-ce qu'un cookie ?
|
1. Qu'est-ce qu'un cookie ?
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
</div>
|
||||||
Un cookie est un petit fichier texte déposé sur votre terminal lors de la visite d'un site web. Il permet au site de mémoriser vos préférences d'affichage.
|
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
|
Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette, smartphone) lors de la visite d'un site web. Il permet au site de mémoriser vos préférences d'affichage (comme le choix du mode clair/sombre) pour faciliter votre navigation ultérieure.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-emerald-300 dark:border-emerald-900/50 transition-colors">
|
{/* SECTION 2 - ZÉRO TRACEUR COMMERCIAL */}
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<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">
|
||||||
<CheckCircle className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
|
<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">
|
||||||
|
<CheckCircle className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
2. Notre engagement "Zéro Traceur Commercial"
|
2. Notre engagement "Zéro Traceur Commercial"
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
</div>
|
||||||
Conformément à notre éthique de cybersécurité, <strong>nous n'utilisons aucun cookie publicitaire et ne revendons aucune donnée à des tiers.</strong>
|
|
||||||
|
<p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||||
|
Conformément à notre éthique de cybersécurité et de souveraineté des données, <strong className="font-semibold text-slate-900 dark:text-white">nous n'utilisons aucun cookie publicitaire, aucun outil de ciblage comportemental et ne revendons aucune donnée à des tiers.</strong>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
{/* SECTION 3 - COOKIES UTILISÉS (TABLEAU MATERIAL) */}
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
<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-5">
|
||||||
<Cookie className="w-5 h-5 text-gise-accent" />
|
<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">
|
||||||
|
<Cookie className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||||
3. Les cookies que nous utilisons
|
3. Les cookies que nous utilisons
|
||||||
</h2>
|
</h2>
|
||||||
<div className="overflow-x-auto">
|
</div>
|
||||||
<table className="w-full text-left border-collapse">
|
|
||||||
|
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||||
|
Voici la liste exhaustive des seuls cookies déposés sur notre site. Ils sont tous strictement nécessaires au fonctionnement technique du service :
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-2 sm:p-4 rounded-2xl border border-transparent dark:border-slate-800/80 overflow-x-auto">
|
||||||
|
<table className="w-full text-left border-collapse min-w-125">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-900/50">
|
<tr className="border-b border-slate-200/80 dark:border-slate-800 text-xs font-semibold text-slate-500 dark:text-slate-400">
|
||||||
<th className="py-3 px-4 text-slate-900 dark:text-white font-semibold">Nom du cookie</th>
|
<th className="py-3 px-4">Nom du cookie</th>
|
||||||
<th className="py-3 px-4 text-slate-900 dark:text-white font-semibold">Finalité</th>
|
<th className="py-3 px-4">Finalité</th>
|
||||||
<th className="py-3 px-4 text-slate-900 dark:text-white font-semibold">Durée</th>
|
<th className="py-3 px-4">Durée de conservation</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-slate-200 dark:divide-slate-800">
|
<tbody className="divide-y divide-slate-200/60 dark:divide-slate-800/60 text-xs">
|
||||||
<tr className="hover:bg-slate-100 dark:hover:bg-slate-900/30 transition-colors">
|
<tr>
|
||||||
<td className="py-3 px-4 font-mono text-xs text-gise-accent">gise_cookie_consent</td>
|
<td className="py-3.5 px-4 font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||||
<td className="py-3 px-4">Mémorise votre choix d'accepter ou de refuser le bandeau.</td>
|
gise_cookie_consent
|
||||||
<td className="py-3 px-4">1 an</td>
|
</td>
|
||||||
|
<td className="py-3.5 px-4 text-slate-700 dark:text-slate-300">
|
||||||
|
Mémorise votre choix d'accepter ou de refuser le bandeau de consentement.
|
||||||
|
</td>
|
||||||
|
<td className="py-3.5 px-4 text-slate-500 dark:text-slate-400">
|
||||||
|
<span className="px-2.5 py-0.5 rounded-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 font-medium">
|
||||||
|
1 an
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr className="hover:bg-slate-100 dark:hover:bg-slate-900/30 transition-colors">
|
<tr>
|
||||||
<td className="py-3 px-4 font-mono text-xs text-gise-accent">theme</td>
|
<td className="py-3.5 px-4 font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||||
<td className="py-3 px-4">Mémorise votre choix de mode clair/sombre.</td>
|
theme
|
||||||
<td className="py-3 px-4">Indéfinie</td>
|
</td>
|
||||||
|
<td className="py-3.5 px-4 text-slate-700 dark:text-slate-300">
|
||||||
|
Mémorise votre choix de mode d'affichage (Clair / Sombre).
|
||||||
|
</td>
|
||||||
|
<td className="py-3.5 px-4 text-slate-500 dark:text-slate-400">
|
||||||
|
<span className="px-2.5 py-0.5 rounded-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 font-medium">
|
||||||
|
Indéfinie
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -103,9 +164,10 @@ export default function PolitiqueCookies() {
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* FOOTER */}
|
{/* 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">
|
<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. Tous droits réservés.</p>
|
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user