first test commit
This commit is contained in:
LathanDevers
@@ -0,0 +1,61 @@
|
||||
name: Deploy GISE landing page test
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- test # Branche principale confirmée
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
# 1. On désactive la vérification SSL pour tout le conteneur du job (Node.js et Git)
|
||||
env:
|
||||
GIT_SSL_NO_VERIFY: "true"
|
||||
NODE_TLS_REJECT_UNAUTHORIZED: "0"
|
||||
|
||||
steps:
|
||||
- name: Patch DNS local pour Gitea Runner
|
||||
run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
|
||||
|
||||
# 2. On force l'exécutable Git interne à ignorer la vérification de l'autorité locale
|
||||
- name: Configuration de Git pour SSL
|
||||
run: git config --global http.sslVerify false
|
||||
|
||||
- name: Récupération du code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Configuration de Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22
|
||||
|
||||
- name: Installation des dépendances (React/Vite)
|
||||
run: npm ci
|
||||
|
||||
- name: Compilation de la Build
|
||||
run: npm run build
|
||||
|
||||
- name: Installation de lftp
|
||||
run: sudo apt-get update && sudo apt-get install -y lftp
|
||||
|
||||
- name: Déploiement FTP (10.10.40.12)
|
||||
env:
|
||||
FTP_USER: ${{ secrets.FTP_USER_TEST }} # Le compte FTP enfermé dans aegis.gise.be
|
||||
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD_TEST }}
|
||||
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
||||
run: |
|
||||
cat << EOF > script.lftp
|
||||
set ftp:passive-mode true
|
||||
set ftp:ssl-allow no
|
||||
set ssl:verify-certificate no
|
||||
set net:timeout 5
|
||||
set net:max-retries 2
|
||||
set dns:fatal-timeout 2
|
||||
open -u "${FTP_USER}","${FTP_PASSWORD}" "${FTP_SERVER}"
|
||||
cd home/${FTP_USER}
|
||||
mirror -R --delete --verbose dist/ ./
|
||||
quit
|
||||
EOF
|
||||
|
||||
lftp -f script.lftp
|
||||
Generated
+58
@@ -12,6 +12,7 @@
|
||||
"lucide-react": "^1.27.0",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.11.0",
|
||||
"tailwindcss": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -1788,6 +1789,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -2879,6 +2893,44 @@
|
||||
"react": "^19.2.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.18.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.1.tgz",
|
||||
"integrity": "sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.18.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.1.tgz",
|
||||
"integrity": "sha512-KaZh+X/6UtEp28x51AUYZDMg9NGoz2ja3dNHa+ta/tk40vCzKhQ/RypCWBMLbmDr6//E24Vv5uPsrqXFozdkAg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.18.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/rolldown": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz",
|
||||
@@ -2928,6 +2980,12 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"lucide-react": "^1.27.0",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.11.0",
|
||||
"tailwindcss": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
+20
-7
@@ -1,10 +1,23 @@
|
||||
import GiseLandingPage from './pages/LandingPage';
|
||||
import './App.css';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import GiseLandingPage from './pages/GiseLandingPage';
|
||||
import MentionsLegales from './pages/MentionsLegales';
|
||||
import PolitiqueConfidentialite from './pages/PolitiqueConfidentialite';
|
||||
import PolitiqueCookies from './pages/PolitiqueCookies';
|
||||
import ConditionsGenerales from './pages/ConditionsGenerales';
|
||||
import ScrollToTop from './components/ScrollToTop';
|
||||
|
||||
function App() {
|
||||
export default function App() {
|
||||
return (
|
||||
<GiseLandingPage />
|
||||
<BrowserRouter>
|
||||
<ScrollToTop />
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<GiseLandingPage />} />
|
||||
<Route path="/mentions-legales" element={<MentionsLegales />} />
|
||||
<Route path="/politique-confidentialite" element={<PolitiqueConfidentialite />} />
|
||||
<Route path="/politique-cookies" element={<PolitiqueCookies />} />
|
||||
<Route path="/cgs" element={<ConditionsGenerales />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
// Dès que le "pathname" (l'URL) change, on remonte instantanément tout en haut
|
||||
window.scrollTo(0, 0);
|
||||
}, [pathname]);
|
||||
|
||||
return null; // Ce composant est invisible, il ne rend rien à l'écran
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useTheme() {
|
||||
const [isDark, setIsDark] = useState<boolean>(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme === 'dark') return true;
|
||||
if (savedTheme === 'light') return false;
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
}, [isDark]);
|
||||
|
||||
const toggleTheme = () => setIsDark(!isDark);
|
||||
|
||||
return { isDark, toggleTheme };
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Configuration pour forcer le mode sombre via une classe .dark */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-gise-accent: #2563eb;
|
||||
--color-gise-accentHover: #1d4ed8;
|
||||
}
|
||||
|
||||
/* Le fond par défaut s'adapte automatiquement (clair/sombre) */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-slate-50 text-slate-900 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
@apply bg-slate-950 text-slate-50;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { Shield, ArrowLeft, FileText, Briefcase, Lock, Scale, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function ConditionsGenerales() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION */}
|
||||
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-6 w-6 text-gise-accent" />
|
||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Conditions Générales de Services (CGS)</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400">
|
||||
Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 leading-relaxed text-sm">
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-gise-accent" />
|
||||
1. Objet
|
||||
</h2>
|
||||
<p>
|
||||
Les présentes CGS ont pour objet de définir les conditions dans lesquelles GISE fournit au Client ses services informatiques d'audit, d'infogérance et de cybersécurité.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Briefcase className="w-5 h-5 text-gise-accent" />
|
||||
2. Obligation de moyens
|
||||
</h2>
|
||||
<p>
|
||||
Dans le domaine de la cybersécurité, GISE est tenue à une <strong>obligation de moyens</strong> et non de résultat concernant la protection contre les cyberattaques.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Lock className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
|
||||
3. Secret professionnel et Confidentialité
|
||||
</h2>
|
||||
<p>
|
||||
GISE s'engage à la plus stricte confidentialité concernant toutes les informations et données confidentielles auxquelles elle pourrait avoir accès lors de l'exécution de ses Services.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
|
||||
<h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<Scale className="w-5 h-5" />
|
||||
4. Droit applicable
|
||||
</h2>
|
||||
<p>
|
||||
Les présentes Conditions Générales sont régies exclusivement par le <strong>droit belge</strong>. Les tribunaux de l'arrondissement judiciaire de Bruxelles seront seuls compétents en cas de litige.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,302 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Shield, Server, Lock, ChevronRight, Activity, Network, Briefcase, Stethoscope, FileText, CheckCircle, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function GiseLandingPage() {
|
||||
const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
|
||||
const [formStatus, setFormStatus] = useState<'idle' | 'submitting' | 'success'>('idle');
|
||||
|
||||
// --- GESTION DU MODE CLAIR/SOMBRE ---
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
// -------------------------------------
|
||||
|
||||
// --- LOGIQUE DES COOKIES ---
|
||||
useEffect(() => {
|
||||
const getCookie = (name: string) => {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop()?.split(';').shift();
|
||||
return null;
|
||||
};
|
||||
const existingConsent = getCookie('gise_cookie_consent');
|
||||
if (existingConsent === 'true') setCookieConsent(true);
|
||||
else if (existingConsent === 'false') setCookieConsent(false);
|
||||
}, []);
|
||||
|
||||
const handleAcceptCookies = () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
|
||||
document.cookie = `gise_cookie_consent=true;expires=${date.toUTCString()};path=/;Secure;SameSite=Strict`;
|
||||
setCookieConsent(true);
|
||||
};
|
||||
|
||||
const handleRefuseCookies = () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
|
||||
document.cookie = `gise_cookie_consent=false;expires=${date.toUTCString()};path=/;Secure;SameSite=Strict`;
|
||||
setCookieConsent(false);
|
||||
};
|
||||
|
||||
const handleResetCookies = () => {
|
||||
document.cookie = "gise_cookie_consent=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||
setCookieConsent(null);
|
||||
};
|
||||
// ---------------------------
|
||||
|
||||
const handleContactSubmit = (e: React.SubmitEvent) => {
|
||||
e.preventDefault();
|
||||
setFormStatus('submitting');
|
||||
setTimeout(() => setFormStatus('success'), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen font-sans selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* NAVIGATION */}
|
||||
<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="flex justify-between items-center h-20">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-8 w-8 text-gise-accent" />
|
||||
<span className="text-2xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
</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 className="flex items-center gap-4">
|
||||
{/* BOUTON TOGGLE THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
||||
</button>
|
||||
|
||||
<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">
|
||||
Réponse à Incident
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* HERO SECTION */}
|
||||
<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="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">
|
||||
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
<span>Cabinet d'Expertise en Cybersécurité B2B</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6 transition-colors">
|
||||
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>
|
||||
|
||||
<p className="mt-4 text-xl text-slate-600 dark:text-slate-400 max-w-3xl mb-10 transition-colors">
|
||||
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>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<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">
|
||||
Demander un Audit <ChevronRight className="w-5 h-5" />
|
||||
</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">
|
||||
Découvrir nos Solutions
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* EXPERTISE */}
|
||||
<section id="expertise" className="py-20 bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<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>
|
||||
<p className="text-slate-600 dark:text-slate-400">Le socle de votre tranquillité d'esprit numérique.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ 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é." },
|
||||
{ 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." }
|
||||
].map((item, i) => (
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SOLUTIONS */}
|
||||
<section id="solutions" className="py-24 bg-white dark:bg-slate-950 relative overflow-hidden transition-colors">
|
||||
<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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Des Solutions Technologiques Sur-Mesure</h2>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* 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">
|
||||
<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">
|
||||
<Shield className="h-8 w-8 text-emerald-500 dark:text-emerald-400" />
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white">Espace Client & Coffre-Fort</h3>
|
||||
</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>
|
||||
<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-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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
{/* INDUSTRIES */}
|
||||
<section id="industries" className="py-20 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<div className="max-w-7xl 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 */}
|
||||
<section id="contact" className="py-24 bg-white dark:bg-slate-950 transition-colors">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<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">Pour un audit de sécurité ou une urgence, notre équipe vous répond sous 2 heures.</p>
|
||||
</div>
|
||||
|
||||
{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">
|
||||
<CheckCircle className="w-16 h-16 text-emerald-500 dark:text-emerald-400 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">Message Envoyé</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>
|
||||
<button onClick={() => setFormStatus('idle')} className="mt-6 text-sm text-emerald-600 dark:text-emerald-400 hover:underline">Envoyer un autre message</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleContactSubmit} className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nom complet</label>
|
||||
<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" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Entreprise / Cabinet</label>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email professionnel</label>
|
||||
<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" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Votre besoin</label>
|
||||
<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>
|
||||
</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">
|
||||
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Envoyer la demande'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center md:items-start gap-8 mb-8">
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Shield className="h-8 w-8 text-slate-400 dark:text-slate-700" />
|
||||
<span className="text-2xl font-bold tracking-wider text-slate-400 dark:text-slate-700">GISE</span>
|
||||
</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">
|
||||
<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-cookies" className="hover:text-slate-900 dark:hover:text-white transition-colors">Politique des 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>
|
||||
<Link to="/cgs" className="hover:text-slate-900 dark:hover:text-white transition-colors">Conditions Générales (CGS)</Link>
|
||||
</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">
|
||||
<Server className="w-3 h-3" />
|
||||
Infrastructure souveraine hébergée en Belgique (UE).
|
||||
</p>
|
||||
<p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* COOKIE BANNER */}
|
||||
{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="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="flex-1">
|
||||
<h4 className="text-slate-900 dark:text-white font-bold mb-2">Gestion de vos données (RGPD)</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
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.
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex gap-3 shrink-0">
|
||||
<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">
|
||||
Refuser
|
||||
</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">
|
||||
Accepter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,459 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Shield,
|
||||
Server,
|
||||
Lock,
|
||||
Activity,
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
FileText,
|
||||
Building2,
|
||||
ChevronRight,
|
||||
Menu,
|
||||
X,
|
||||
Database,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Users,
|
||||
ShieldCheck,
|
||||
HardDrive
|
||||
} from 'lucide-react';
|
||||
|
||||
export const GiseLandingPage: React.FC = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'sovereignty' | 'cyber' | 'vciso'>('sovereignty');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-100 font-sans antialiased selection:bg-emerald-500 selection:text-slate-950">
|
||||
|
||||
{/* 1. NAVBAR */}
|
||||
<nav className="sticky top-0 z-50 backdrop-blur-md bg-slate-950/80 border-b border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-xl bg-linear-to-br from-blue-600 to-emerald-500 flex items-center justify-center shadow-lg shadow-emerald-500/10">
|
||||
<Shield className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-2xl font-black tracking-wider text-white">GISE</span>
|
||||
<span className="block text-[10px] uppercase tracking-widest text-emerald-400 font-semibold -mt-1">
|
||||
Powered by AEGIS
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nav Links (Desktop) */}
|
||||
<div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-300">
|
||||
<a href="#services" className="hover:text-emerald-400 transition-colors">Services</a>
|
||||
<a href="#aegis" className="hover:text-emerald-400 transition-colors">Plateforme AEGIS</a>
|
||||
<a href="#expertise" className="hover:text-emerald-400 transition-colors">Expertise & Conformité</a>
|
||||
<a href="#tarifs" className="hover:text-emerald-400 transition-colors">Offres</a>
|
||||
</div>
|
||||
|
||||
{/* Actions (Desktop) */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<a
|
||||
href="#audit"
|
||||
className="text-xs font-semibold px-4 py-2.5 rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 hover:text-white transition-all"
|
||||
>
|
||||
Espace Client AEGIS
|
||||
</a>
|
||||
<a
|
||||
href="#audit"
|
||||
className="text-xs font-semibold px-4 py-2.5 rounded-lg bg-emerald-500 text-slate-950 hover:bg-emerald-400 transition-all shadow-md shadow-emerald-500/20"
|
||||
>
|
||||
Demander un Audit
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-900"
|
||||
>
|
||||
{isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Dropdown */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-b border-slate-800 bg-slate-950 px-4 pt-2 pb-6 space-y-3">
|
||||
<a href="#services" className="block py-2 text-slate-300 hover:text-emerald-400">Services</a>
|
||||
<a href="#aegis" className="block py-2 text-slate-300 hover:text-emerald-400">Plateforme AEGIS</a>
|
||||
<a href="#expertise" className="block py-2 text-slate-300 hover:text-emerald-400">Expertise & Conformité</a>
|
||||
<a href="#tarifs" className="block py-2 text-slate-300 hover:text-emerald-400">Offres</a>
|
||||
<div className="pt-4 flex flex-col gap-2">
|
||||
<a href="#audit" className="w-full text-center py-2.5 text-xs font-semibold rounded-lg bg-emerald-500 text-slate-950">
|
||||
Demander un Audit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* 2. HERO SECTION */}
|
||||
<section className="relative overflow-hidden pt-20 pb-28 md:pt-32 md:pb-40">
|
||||
{/* Glow background */}
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-150 h-87.5 bg-emerald-500/10 blur-[140px] rounded-full pointer-events-none" />
|
||||
<div className="absolute top-1/3 left-1/3 w-100 h-75 bg-blue-600/10 blur-[120px] rounded-full pointer-events-none" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-900 border border-slate-800 text-xs text-emerald-400 font-medium">
|
||||
<ShieldCheck className="h-4 w-4" />
|
||||
<span>Conformité NIS2 & RGPD • Cloud 100% Souverain Belge</span>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight text-white leading-[1.15]">
|
||||
L'Infogérance Souveraine & la <span className="text-transparent bg-clip-text bg-linear-to-r from-emerald-400 to-blue-500">Cyber-Résilience</span> pour PME
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-lg sm:text-xl text-slate-400 leading-relaxed font-normal">
|
||||
GISE protège et gère l'infrastructure des cabinets d'avocats, cliniques et professionnels exigeants. Reprenez le contrôle de vos données sans dépendre des géants américains.
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
|
||||
<a
|
||||
href="#audit"
|
||||
className="w-full sm:w-auto px-8 py-4 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-xl shadow-emerald-500/20 flex items-center justify-center gap-2 text-sm"
|
||||
>
|
||||
<span>Auditer mon infrastructure</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</a>
|
||||
<a
|
||||
href="#aegis"
|
||||
className="w-full sm:w-auto px-8 py-4 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 font-semibold hover:bg-slate-800 hover:text-white transition-all flex items-center justify-center gap-2 text-sm"
|
||||
>
|
||||
<span>Découvrir le Trust Center AEGIS</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Feature Badges */}
|
||||
<div className="pt-10 grid grid-cols-2 md:grid-cols-4 gap-4 text-left border-t border-slate-800/80">
|
||||
<div>
|
||||
<span className="text-2xl font-black text-white">100%</span>
|
||||
<p className="text-xs text-slate-400">Hébergé en Belgique (Bare-Metal)</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-2xl font-black text-emerald-400">< 4h</span>
|
||||
<p className="text-xs text-slate-400">Garantie de Redémarrage (PRA)</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-2xl font-black text-white">Zero Trust</span>
|
||||
<p className="text-xs text-slate-400">Architecture Réseau Étanche</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-2xl font-black text-blue-400">vCISO</span>
|
||||
<p className="text-xs text-slate-400">Accompagnement Réglementaire</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. PLATFORM PREVIEW (AEGIS) */}
|
||||
<section id="aegis" className="py-20 bg-slate-900/50 border-y border-slate-800/80 relative">
|
||||
<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-4">
|
||||
<h2 className="text-xs font-bold uppercase tracking-widest text-emerald-400">Espace Privé Dirigeant</h2>
|
||||
<p className="text-3xl font-bold text-white">AEGIS : Votre tableau de bord de réassurance en temps réel</p>
|
||||
<p className="text-slate-400 text-sm">
|
||||
Fini l'informatique "boîte noire". visualisez vos nœuds de calcul, la preuve de vos sauvegardes immuables et les menaces neutralisées.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* UI Mockup Card */}
|
||||
<div className="rounded-2xl bg-slate-950 border border-slate-800 shadow-2xl p-6 md:p-8 space-y-6">
|
||||
{/* Window bar */}
|
||||
<div className="flex items-center justify-between border-b border-slate-800 pb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500/80" />
|
||||
<span className="text-xs text-slate-500 ml-2 font-mono">https://aegis.gise.be/trust-center</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-emerald-500/10 px-3 py-1 rounded-full text-[11px] font-medium text-emerald-400">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
Infrastructures Opérationnelles (100% SLA)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mock Widgets Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Widget 1 */}
|
||||
<div className="bg-slate-900/80 rounded-xl p-5 border border-slate-800 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-slate-400">Supervision Cluster</span>
|
||||
<Activity className="h-4 w-4 text-emerald-400" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-slate-200">Proxmox Bare-Metal #01</span>
|
||||
<span className="text-xs text-emerald-400 font-bold">99.98%</span>
|
||||
</div>
|
||||
<div className="w-full bg-slate-800 rounded-full h-1.5">
|
||||
<div className="bg-emerald-400 h-1.5 rounded-full" style={{ width: '99%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Widget 2 */}
|
||||
<div className="bg-slate-900/80 rounded-xl p-5 border border-slate-800 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-slate-400">Sauvegardes Immuables (PBS)</span>
|
||||
<Database className="h-4 w-4 text-blue-400" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xl font-bold text-white">Dernier Check : Réussi</p>
|
||||
<p className="text-xs text-slate-400">PRA garanti < 4 heures • Restauration testée</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Widget 3 */}
|
||||
<div className="bg-slate-900/80 rounded-xl p-5 border border-slate-800 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-slate-400">Posture de Sécurité (30j)</span>
|
||||
<Shield className="h-4 w-4 text-emerald-400" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xl font-bold text-white">1 420 Menaces Bloquées</p>
|
||||
<p className="text-xs text-slate-400">Pare-feu OPNsense & Active DNS Active</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. NOS SERVICES (3 POLES) */}
|
||||
<section id="services" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
|
||||
<h2 className="text-xs font-bold uppercase tracking-widest text-emerald-400">Offre Globale</h2>
|
||||
<p className="text-3xl sm:text-4xl font-bold text-white">Une couverture complète de votre système d'information</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
{/* Card 1 */}
|
||||
<div className="rounded-2xl bg-slate-900/60 border border-slate-800 p-8 hover:border-emerald-500/50 transition-all space-y-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center">
|
||||
<Server className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white">1. Socle Souverain & Infogérance</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Assainissement et migration de votre matériel vers un Cloud Privé local (Proxmox), protégé par pare-feu OPNsense et VPN WireGuard.
|
||||
</p>
|
||||
<ul className="space-y-2 text-xs text-slate-300">
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Migration Cloud Privé Souverain</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Segmentation réseau Zero-Trust</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Support ITSM & Helpdesk VIP</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="rounded-2xl bg-slate-900/60 border border-slate-800 p-8 hover:border-emerald-500/50 transition-all space-y-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center">
|
||||
<Shield className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white">2. Continuité & Anti-Ransomware</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Protection contre les arrêts d'activité. Vos sauvegardes sont chiffrées hors-site avec engagement de restauration en moins de 4h.
|
||||
</p>
|
||||
<ul className="space-y-2 text-xs text-slate-300">
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Guarantee PRA < 4 heures</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Sauvegardes immuables PBS</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> SOC Passif & Filtrage DNS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="rounded-2xl bg-slate-900/60 border border-slate-800 p-8 hover:border-emerald-500/50 transition-all space-y-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center">
|
||||
<FileText className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white">3. vCISO & Conformité NIS2</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Mise en conformité avec les réglementations belges (CyFun/CCB) et européennes (NIS2, RGPD) pilotée par un directeur sécurité dédié.
|
||||
</p>
|
||||
<ul className="space-y-2 text-xs text-slate-300">
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Direction Sécurité Virtualisée</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Rédaction de PSSI & Audits</li>
|
||||
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-400" /> Simulation Phishing collaborateurs</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. SECTEURS CIBLES */}
|
||||
<section id="expertise" className="py-20 bg-slate-900/30 border-t border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xs font-bold uppercase tracking-widest text-emerald-400">Cibles Privilégiées</h2>
|
||||
<p className="text-3xl font-bold text-white">Conçu pour les structures qui ne peuvent pas se permettre une fuite de données</p>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Les obligations réglementaires et les cyberattaques ciblent aujourd'hui en priorité les PME détenant des données confidentielles ou financières.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 pt-2">
|
||||
<div className="flex gap-4 p-4 rounded-xl bg-slate-900 border border-slate-800">
|
||||
<Building2 className="h-6 w-6 text-emerald-400 shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-white text-sm">Cabinets d'Avocats & Notaires</h4>
|
||||
<p className="text-xs text-slate-400">Protection absolue du secret professionnel et des pièces confidentielles.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 p-4 rounded-xl bg-slate-900 border border-slate-800">
|
||||
<Users className="h-6 w-6 text-blue-400 shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-white text-sm">Fiduciaires & Bureaux Comptables</h4>
|
||||
<p className="text-xs text-slate-400">Garantie zéro interruption durant les clôtures fiscales critiques.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 p-4 rounded-xl bg-slate-900 border border-slate-800">
|
||||
<ShieldCheck className="h-6 w-6 text-purple-400 shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-white text-sm">Cliniques Privées & Santé</h4>
|
||||
<p className="text-xs text-slate-400">Hébergement sécurisé des données médicales conforme au cadre CyFun.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Tab Box */}
|
||||
<div className="rounded-2xl bg-slate-950 border border-slate-800 p-6 md:p-8 space-y-6">
|
||||
<h3 className="text-lg font-bold text-white">Pourquoi choisir GISE plutôt qu'un MSP classique ?</h3>
|
||||
|
||||
<div className="space-y-4 text-sm text-slate-300">
|
||||
<div className="p-4 rounded-xl bg-slate-900/80 border border-slate-800">
|
||||
<span className="font-bold text-emerald-400">Indépendance vis-à-vis des GAFAM :</span>
|
||||
<p className="text-xs text-slate-400 mt-1">Vos données ne sont pas stockées chez des acteurs américains soumis au Cloud Act.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/80 border border-slate-800">
|
||||
<span className="font-bold text-emerald-400">Engagement contractuel clair :</span>
|
||||
<p className="text-xs text-slate-400 mt-1">Nous vendons une garantie de restauration sous 4h, pas des heures de maintenance floues.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-900/80 border border-slate-800">
|
||||
<span className="font-bold text-emerald-400">Transparence totale via AEGIS :</span>
|
||||
<p className="text-xs text-slate-400 mt-1">Vous disposez d'un tableau de bord de réassurance accessible 24/7 pour votre direction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. FORMULAIRE D'AUDIT / CONTACT */}
|
||||
<section id="audit" className="py-24 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="rounded-3xl bg-linear-to-b from-slate-900 to-slate-950 border border-slate-800 p-8 md:p-12 space-y-8 shadow-2xl relative overflow-hidden">
|
||||
|
||||
<div className="text-center space-y-4 max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-white">Demandez votre audit de sécurité initial</h2>
|
||||
<p className="text-slate-400 text-sm">
|
||||
Analyse sans engagement de votre réseau, de vos sauvegardes et de votre exposition aux menaces.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto" onSubmit={(e) => e.preventDefault()}>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-2">Nom & Prénom</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Jean Dupont"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-2">Société / Organisation</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Cabinet Dupont & Associés"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-2">E-mail professionnel</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="j.dupont@cabinet.be"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-2">Téléphone</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="+32 2 000 00 00"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-2">Taille du parc informatique</label>
|
||||
<select className="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-300 text-sm focus:outline-none focus:border-emerald-500">
|
||||
<option>5 à 15 postes</option>
|
||||
<option>15 à 50 postes</option>
|
||||
<option>Plus de 50 postes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-4 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/20 text-sm"
|
||||
>
|
||||
Demander un diagnostic offert
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 7. FOOTER */}
|
||||
<footer className="border-t border-slate-800/80 bg-slate-950 py-12 text-slate-500 text-xs">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-7 rounded-lg bg-emerald-500 flex items-center justify-center text-slate-950 font-black">
|
||||
G
|
||||
</div>
|
||||
<span className="text-slate-300 font-bold text-sm">GISE SRL</span>
|
||||
<span>— Infogérance Souveraine & Cyber-Résilience</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<span>Bruxelles • Wallonie • Flandre</span>
|
||||
<span>Hébergé 100% en Belgique</span>
|
||||
<span>© {new Date().getFullYear()} GISE. Tous droits réservés.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GiseLandingPage;
|
||||
@@ -0,0 +1,142 @@
|
||||
import { Shield, ArrowLeft, Building, Mail, Phone, Server, FileCheck, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function MentionsLegales() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION */}
|
||||
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-6 w-6 text-gise-accent" />
|
||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU PRINCIPAL */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
{/* Titre */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Mentions Légales</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Informations légales obligatoires relatives à l'éditeur et à l'hébergeur du site web GISE, conformément au Code de droit économique belge.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 leading-relaxed">
|
||||
|
||||
{/* SECTION 1 */}
|
||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
||||
<Building className="w-6 h-6 text-gise-accent" />
|
||||
1. Éditeur du site
|
||||
</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>
|
||||
<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 */}
|
||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<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>
|
||||
<ul className="space-y-3 text-sm">
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-slate-400 dark:text-slate-500" />
|
||||
<span><strong className="text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Phone className="w-4 h-4 text-slate-400 dark:text-slate-500" />
|
||||
<span><strong className="text-slate-900 dark:text-white">Téléphone :</strong> +32 (0)2 123 45 67</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 */}
|
||||
<section className="bg-white dark:bg-slate-900 p-8 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-3">
|
||||
<Server className="w-6 h-6 text-gise-accent" />
|
||||
3. Hébergement du site
|
||||
</h2>
|
||||
<p className="text-sm mb-4">
|
||||
Conformément à nos engagements de souveraineté numérique et de protection des données B2B :
|
||||
</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>
|
||||
<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><strong className="text-slate-900 dark:text-white">Protection réseau :</strong> Cloudflare & Pare-feu d'entreprise OPNsense</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4 */}
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<FileCheck className="w-5 h-5 text-gise-accent" />
|
||||
4. Propriété intellectuelle
|
||||
</h2>
|
||||
<p className="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.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { Shield, ArrowLeft, Lock, Database, UserCheck, Scale, Server, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function PolitiqueConfidentialite() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION */}
|
||||
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-6 w-6 text-gise-accent" />
|
||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Politique de Confidentialité</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400">
|
||||
Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-slate-400 mt-4 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 leading-relaxed text-sm">
|
||||
|
||||
{/* SECTION 1 */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Lock className="w-5 h-5 text-gise-accent" />
|
||||
1. Responsable du traitement
|
||||
</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>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<div className="space-y-4">
|
||||
<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>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
|
||||
<li><strong>Données :</strong> Nom, e-mail professionnel, entreprise, contenu du message.</li>
|
||||
<li><strong>Finalité :</strong> Répondre à vos demandes ou établir un devis.</li>
|
||||
</ul>
|
||||
</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>
|
||||
<ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
|
||||
<li><strong>Données :</strong> Adresse IP, logs de connexion, agent utilisateur.</li>
|
||||
<li><strong>Finalité :</strong> Détecter et prévenir les cyberattaques.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Server className="w-5 h-5 text-gise-accent" />
|
||||
3. Hébergement et partage des données
|
||||
</h2>
|
||||
<p className="mb-3">
|
||||
Vos données ne sont <strong>jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales.
|
||||
</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>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4 */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<UserCheck className="w-5 h-5 text-gise-accent" />
|
||||
4. Vos droits (Conformité RGPD)
|
||||
</h2>
|
||||
<ul className="grid sm:grid-cols-2 gap-3 mb-4">
|
||||
<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>
|
||||
</ul>
|
||||
<p>
|
||||
Pour exercer ces droits, contactez notre DPO : <strong>privacy@gise.be</strong>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5 */}
|
||||
<section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
|
||||
<h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<Scale className="w-5 h-5" />
|
||||
5. Réclamation auprès de l'autorité de contrôle
|
||||
</h2>
|
||||
<address className="not-italic text-slate-600 dark:text-slate-400">
|
||||
<strong>Autorité de protection des données (Belgique)</strong><br />
|
||||
Rue de la Presse, 35, 1000 Bruxelles<br />
|
||||
Site web : <a href="https://www.autoriteprotectiondonnees.be" target="_blank" rel="noopener noreferrer" className="text-gise-accent hover:underline">www.autoriteprotectiondonnees.be</a>
|
||||
</address>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import { Shield, ArrowLeft, Cookie, Info, CheckCircle, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function PolitiqueCookies() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION */}
|
||||
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-6 w-6 text-gise-accent" />
|
||||
<span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
|
||||
<div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
|
||||
<h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4 flex items-center gap-4">
|
||||
<Cookie className="w-10 h-10 text-gise-accent" />
|
||||
Politique des Cookies
|
||||
</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400">
|
||||
Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 leading-relaxed text-sm">
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Info className="w-5 h-5 text-gise-accent" />
|
||||
1. Qu'est-ce qu'un cookie ?
|
||||
</h2>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<section className="bg-white dark:bg-slate-900 p-6 rounded-xl border border-emerald-300 dark:border-emerald-900/50 transition-colors">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
|
||||
2. Notre engagement "Zéro Traceur Commercial"
|
||||
</h2>
|
||||
<p>
|
||||
Conformément à notre éthique de cybersécurité, <strong>nous n'utilisons aucun cookie publicitaire et ne revendons aucune donnée à des tiers.</strong>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Cookie className="w-5 h-5 text-gise-accent" />
|
||||
3. Les cookies que nous utilisons
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-900/50">
|
||||
<th className="py-3 px-4 text-slate-900 dark:text-white font-semibold">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 text-slate-900 dark:text-white font-semibold">Durée</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-200 dark:divide-slate-800">
|
||||
<tr className="hover:bg-slate-100 dark:hover:bg-slate-900/30 transition-colors">
|
||||
<td className="py-3 px-4 font-mono text-xs text-gise-accent">gise_cookie_consent</td>
|
||||
<td className="py-3 px-4">Mémorise votre choix d'accepter ou de refuser le bandeau.</td>
|
||||
<td className="py-3 px-4">1 an</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-slate-100 dark:hover:bg-slate-900/30 transition-colors">
|
||||
<td className="py-3 px-4 font-mono text-xs text-gise-accent">theme</td>
|
||||
<td className="py-3 px-4">Mémorise votre choix de mode clair/sombre.</td>
|
||||
<td className="py-3 px-4">Indéfinie</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user