Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 LathanDevers
|
660a009914 | ||
|
LathanDevers
|
bb99b23d2d | ||
|
LathanDevers
|
d12589bdd6 | ||
|
LathanDevers
|
79953671ab |
@@ -0,0 +1,2 @@
|
||||
VITE_WEB3FORMS_KEY=
|
||||
VITE_URL_API_WEB3FORMS=
|
||||
@@ -34,6 +34,9 @@ jobs:
|
||||
run: npm ci
|
||||
|
||||
- name: Compilation de la Build
|
||||
env:
|
||||
VITE_WEB3FORMS_KEY: ${{ secrets.WEB3FORMS_KEY }}
|
||||
VITE_URL_API_WEB3FORMS : ${{ secrets.URL_API_WEB3FORMS }}
|
||||
run: npm run build
|
||||
|
||||
- name: Installation de lftp
|
||||
|
||||
@@ -34,6 +34,9 @@ jobs:
|
||||
run: npm ci
|
||||
|
||||
- name: Compilation de la Build
|
||||
env:
|
||||
VITE_WEB3FORMS_KEY: ${{ secrets.WEB3FORMS_KEY }}
|
||||
VITE_URL_API_WEB3FORMS : ${{ secrets.URL_API_WEB3FORMS }}
|
||||
run: npm run build
|
||||
|
||||
- name: Installation de lftp
|
||||
|
||||
@@ -11,6 +11,9 @@ node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.env
|
||||
.env.local
|
||||
.env.development
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
|
||||
Generated
+287
-1
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"lucide-react": "^1.27.0",
|
||||
"plugin-react-swc": "^0.0.1-security",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.11.0",
|
||||
@@ -17,10 +18,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/node": "^24.13.3",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"@vitejs/plugin-react-swc": "^4.3.2",
|
||||
"eslint": "^10.6.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.3",
|
||||
@@ -815,6 +817,268 @@
|
||||
"integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@swc/core": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.46.tgz",
|
||||
"integrity": "sha512-Ri3em2mBpq3h2zSPliCYl63otDGqek8PPEfv2nWgRQEbZ/VBCNyypVTVQ6cEbTCXBhy+WE2T3fQb08moIyuYaw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@swc/counter": "^0.1.3",
|
||||
"@swc/types": "^0.1.27"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/swc"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@swc/core-darwin-arm64": "1.15.46",
|
||||
"@swc/core-darwin-x64": "1.15.46",
|
||||
"@swc/core-linux-arm-gnueabihf": "1.15.46",
|
||||
"@swc/core-linux-arm64-gnu": "1.15.46",
|
||||
"@swc/core-linux-arm64-musl": "1.15.46",
|
||||
"@swc/core-linux-ppc64-gnu": "1.15.46",
|
||||
"@swc/core-linux-s390x-gnu": "1.15.46",
|
||||
"@swc/core-linux-x64-gnu": "1.15.46",
|
||||
"@swc/core-linux-x64-musl": "1.15.46",
|
||||
"@swc/core-win32-arm64-msvc": "1.15.46",
|
||||
"@swc/core-win32-ia32-msvc": "1.15.46",
|
||||
"@swc/core-win32-x64-msvc": "1.15.46"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@swc/helpers": ">=0.5.17"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@swc/helpers": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-darwin-arm64": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.46.tgz",
|
||||
"integrity": "sha512-IsISIT22EfktVJrlvIpnAxG2u/A9aob9l99HMlx80x72WlFmFPk1V3UhkEzx86eJP8hw049KTFv/RISho2cq2Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-darwin-x64": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.46.tgz",
|
||||
"integrity": "sha512-4Tj4ppVIPCmUMpmGFiGtyEriwLyJ+yi/US4WfBrP/ok8COGddDZXLEzQETnKyK46mjvr1v0jevrS23zjoff7vA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-arm-gnueabihf": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.46.tgz",
|
||||
"integrity": "sha512-i8tUGnNjyOgMmfmgFSg4aeJLQoFyfpIHK5FjpQAwpRyQIqEUB2w1e8zIDQzY1WhOxx8NoS1S5iUL813Un4Sf5A==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-arm64-gnu": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.46.tgz",
|
||||
"integrity": "sha512-c0OnhqzdhfOvv6qhNCcByepB+sNYOGZyhtr2Qa6ZCHvAWTYhSRw4j/u92Stue9PbZ/6q74b9nHzi76+kVzqQHQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-arm64-musl": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.46.tgz",
|
||||
"integrity": "sha512-imyRpNEcUzFQFV2LE4jL68ErvmKEuZCbvZru77iQREunJ+bR4i658cupTgtG1mLYM3F1Tzy3Sb9xYb02KghWTg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-ppc64-gnu": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-ppc64-gnu/-/core-linux-ppc64-gnu-1.15.46.tgz",
|
||||
"integrity": "sha512-ctEfcl/HcUeomK33cbySiHZm98GEDIxTm1EkpBsYCiHxElYBzvTXVeuQT2YwbUXn9XCrjiw4ipyUNk33k26qRg==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-s390x-gnu": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-s390x-gnu/-/core-linux-s390x-gnu-1.15.46.tgz",
|
||||
"integrity": "sha512-DxlMdnt84TtRVTv7WL/thWyz9+QU8QZNNoAP9rrk0P68LziuhfePp8MjQ44zIprpTHTsEwyziIuGUUN5iSC1bQ==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-x64-gnu": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.46.tgz",
|
||||
"integrity": "sha512-SKxI7J6t90XPl8hRUqtJi9NfGdunN/E/vZMc7Bc0figeRdOPDBT+Tm8g7cx9xM0T0mewh2l+8dewa3Am27/P+A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-linux-x64-musl": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.46.tgz",
|
||||
"integrity": "sha512-qj9T6B7bosI0VEsrWOVXZN1OXxS8Tp63ywyrLxNdOycnUtLdkgYcoBsN5y8ImnDDsnwrEWZOy1e+J4xSe7mA3Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-win32-arm64-msvc": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.46.tgz",
|
||||
"integrity": "sha512-8p7l4c3LU+eA5g9Et1JPhNeMC1oQwXTGU+uah8DPIBX7YXzqswvaBtyKVmXefVGi/DJU1x3YJsc3mbAp9aWzSQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-win32-ia32-msvc": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.46.tgz",
|
||||
"integrity": "sha512-tUEnfr3Bn9u6FOjUb3PN9p+09qZC2j+wNDLKHzXXZn22rqGcUqR/ohCRSS+nG9B9+X+U+3FewNEHJkTmdIvMjQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/core-win32-x64-msvc": {
|
||||
"version": "1.15.46",
|
||||
"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.46.tgz",
|
||||
"integrity": "sha512-Vux7UDzBJYQggSuPfcl2w9iu+IJpgpRCxHzgCaVkELnAXAE4XZMOTX9HNcaNiwfeIDqdu2rkr69RuDm6wY8neA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/counter": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
|
||||
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@swc/types": {
|
||||
"version": "0.1.27",
|
||||
"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.27.tgz",
|
||||
"integrity": "sha512-K6h3iUlqeM946U4sXFYeahefR1YBbXJvko+hv8WS8/0BNJ4OHiHRywMnQUJCqkR7Y9+hqQ1TvEpiKqUhz7NEFg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@swc/counter": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
|
||||
@@ -1651,6 +1915,23 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react-swc": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-4.3.2.tgz",
|
||||
"integrity": "sha512-MlSlmSAYbYwPjGa+CjOAqwij09iPYAQDHwx8osVkwoDamCxXlg+avpkC65Ysv+L/uqUWvRTsnJCKPjVhZih/sA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rolldown/pluginutils": "^1.0.1",
|
||||
"@swc/core": "^1.15.46"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vite": "^4 || ^5 || ^6 || ^7 || ^8"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.17.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
|
||||
@@ -2824,6 +3105,11 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/plugin-react-swc": {
|
||||
"version": "0.0.1-security",
|
||||
"resolved": "https://registry.npmjs.org/plugin-react-swc/-/plugin-react-swc-0.0.1-security.tgz",
|
||||
"integrity": "sha512-4jyIfp5tCL5CC1tZ9N25k5djEijGu++FrISjJRGNzAuYYNBYfAnDzhVOiRHOiZfEPmq5Q8j5tJGAn4KDLAQ22A=="
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.23.tgz",
|
||||
|
||||
+3
-1
@@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"lucide-react": "^1.27.0",
|
||||
"plugin-react-swc": "^0.0.1-security",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.11.0",
|
||||
@@ -19,10 +20,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/node": "^24.13.3",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"@vitejs/plugin-react-swc": "^4.3.2",
|
||||
"eslint": "^10.6.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.3",
|
||||
|
||||
+17
-14
@@ -1,23 +1,26 @@
|
||||
import { Suspense, lazy } from 'react';
|
||||
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';
|
||||
|
||||
const GiseLandingPage = lazy(() => import('@pages/GiseLandingPage'));
|
||||
const MentionsLegales = lazy(() => import('@pages/MentionsLegales'));
|
||||
const PolitiqueConfidentialite = lazy(() => import('@pages/PolitiqueConfidentialite'));
|
||||
const PolitiqueCookies = lazy(() => import('@pages/PolitiqueCookies'));
|
||||
const ConditionsGenerales = lazy(() => import('@pages/ConditionsGenerales'));
|
||||
const ScrollToTop = lazy(() => import('@components/ScrollToTop'));
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<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>
|
||||
<Suspense fallback={<div className="h-screen bg-slate-950 flex items-center justify-center text-white">GISE</div>}>
|
||||
<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>
|
||||
</Suspense>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function CookieBanner() {
|
||||
const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Lecture au chargement
|
||||
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);
|
||||
|
||||
// Écoute de l'événement venant du Footer pour réinitialiser
|
||||
const handleShowBanner = () => setCookieConsent(null);
|
||||
window.addEventListener('reset-cookies', handleShowBanner);
|
||||
return () => window.removeEventListener('reset-cookies', handleShowBanner);
|
||||
}, []);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
if (cookieConsent !== null) return null;
|
||||
|
||||
return (
|
||||
<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="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="space-y-1">
|
||||
<h4 className="text-xs font-bold text-slate-900 dark:text-white">Respect de votre vie privée</h4>
|
||||
<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é. Aucun traceur publicitaire n'est déployé.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<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
|
||||
</button>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Shield, Server } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export default function Footer() {
|
||||
const handleResetCookies = () => {
|
||||
// Efface le cookie
|
||||
document.cookie = "gise_cookie_consent=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||
// Prévient le composant CookieBanner de s'afficher via un événement global
|
||||
window.dispatchEvent(new Event('reset-cookies'));
|
||||
};
|
||||
|
||||
return (
|
||||
<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 space-y-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
||||
<Shield className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<span className="font-bold text-slate-900 dark:text-white text-sm">GISE</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="/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">Cookies</Link>
|
||||
<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">CGS</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<p className="flex items-center gap-1.5">
|
||||
<Server className="w-3.5 h-3.5 text-blue-600" />
|
||||
Infrastructure souveraine 100% hébergée en Belgique.
|
||||
</p>
|
||||
<p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Shield, ArrowLeft, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '@hooks/useTheme';
|
||||
|
||||
export default function LegalNavbar() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<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" />
|
||||
<span>Retour à l'accueil</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
GISE
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Shield, Moon, Sun, ArrowUpRight } from 'lucide-react';
|
||||
import { useTheme } from '@hooks/useTheme';
|
||||
|
||||
export default function Navbar() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
|
||||
<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 */}
|
||||
<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>
|
||||
|
||||
{/* Nav Links */}
|
||||
<nav className="hidden md:flex items-center gap-1 font-medium text-xs text-slate-600 dark:text-slate-300">
|
||||
<a href="#engagements" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">Nos Engagements</a>
|
||||
<a href="#aegis" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">Portail AEGIS</a>
|
||||
<a href="#secteurs" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">Secteurs</a>
|
||||
<a href="#comparatif" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">Pourquoi GISE</a>
|
||||
</nav>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={toggleTheme} 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default function SimpleFooter() {
|
||||
return (
|
||||
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { Activity, HardDrive, Server, Shield, ShieldCheck, Lock, Zap } from "lucide-react";
|
||||
|
||||
export default function AegisSection() {
|
||||
return(
|
||||
<section id="aegis" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
|
||||
Transparence Totale
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Le Portail AEGIS : Votre tableau de bord en temps réel
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
En tant que dirigeant, vous disposez d'un espace privé réassurant qui vous prouve chaque jour que votre entreprise est protégée.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-12 gap-8 items-center">
|
||||
|
||||
{/* Feature List Left (5 cols) */}
|
||||
<div className="lg:col-span-5 space-y-3">
|
||||
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="p-2 rounded-xl bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
|
||||
<Activity className="h-4 w-4" />
|
||||
</div>
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Suivi de Santé & Disponibilité</h4>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||
Visualisez l'état de marche de vos serveurs et de vos accès avec des indicateurs vert émeraude simples à lire.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="p-2 rounded-xl bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Sauvegardes & Menaces Neutralisées</h4>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||
Consultez la date exacte de votre dernière sauvegarde et le nombre d'intrusions bloquées ce mois-ci.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="p-2 rounded-xl bg-indigo-50 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400">
|
||||
<Lock className="h-4 w-4" />
|
||||
</div>
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Coffre-Fort & Canal Direct</h4>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||
Stockez vos documents importants et contactez directement votre spécialiste d'un simple clic.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* UI Box Preview (Style Google Admin Console) (7 cols) */}
|
||||
<div className="lg:col-span-7 bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-lg space-y-5">
|
||||
|
||||
{/* App Header Bar */}
|
||||
<div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="h-3 w-3 rounded-full bg-emerald-500" />
|
||||
<span className="text-xs font-bold text-slate-900 dark:text-white">AEGIS Command Center</span>
|
||||
</div>
|
||||
<span className="text-[11px] font-semibold text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-200/60 dark:border-emerald-800/60">
|
||||
● Système Protégé
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Metric Rows */}
|
||||
<div className="space-y-3">
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="h-4 w-4 text-blue-600" />
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">Serveurs Cloud Privé (Belgique)</span>
|
||||
</div>
|
||||
<span className="font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-950 px-2.5 py-1 rounded-full">
|
||||
100% Opérationnel
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive className="h-4 w-4 text-emerald-600" />
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">Sauvegarde Automatique Hors-Site</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-600 dark:text-slate-400">
|
||||
Dernier check : Aujourd'hui à 04h00
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="h-4 w-4 text-indigo-600" />
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">Tentatives d'Intrusion Bloquées (30j)</span>
|
||||
</div>
|
||||
<span className="font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950 px-2.5 py-1 rounded-full">
|
||||
1 420 Attaques Neutralisées
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-blue-50/50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900/50 text-xs text-slate-600 dark:text-slate-300 flex items-center gap-2.5">
|
||||
<Zap className="h-4 w-4 text-blue-600 shrink-0" />
|
||||
<span><em>Demande d'évolution : demandez un nouvel accès ou une extension en 1 clic depuis votre espace.</em></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Check, X } from "lucide-react";
|
||||
|
||||
export default function ComparativeSection(){
|
||||
return(
|
||||
<section id="comparatif" className="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16 space-y-2">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Pourquoi choisir GISE plutôt qu'un prestataire classique ?
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Les dépanneurs traditionnels interviennent quand la panne est là. GISE prend un engagement de responsabilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{/* Classique */}
|
||||
<div className="p-8 rounded-[28px] bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 space-y-4">
|
||||
<h3 className="font-bold text-slate-500 text-xs uppercase tracking-wider">Prestataire Classique</h3>
|
||||
<ul className="space-y-3.5 text-xs text-slate-600 dark:text-slate-400 font-medium">
|
||||
<li className="flex items-start gap-2.5">
|
||||
<X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
|
||||
<span>Intervention réactive (dépanne une fois la panne survenue)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2.5">
|
||||
<X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
|
||||
<span>Données hébergées à l'étranger sans garantie de confidentialité</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2.5">
|
||||
<X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
|
||||
<span>Facture mensuelle floue sans vision sur les menaces bloquées</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* GISE */}
|
||||
<div className="p-8 rounded-[28px] bg-blue-50 dark:bg-blue-950 border-2 border-blue-600/40 space-y-4 relative">
|
||||
|
||||
<h3 className="font-bold text-blue-600 dark:text-blue-400 text-xs uppercase tracking-wider">Offre GISE & AEGIS</h3>
|
||||
<ul className="space-y-3.5 text-xs text-slate-800 dark:text-slate-200 font-semibold">
|
||||
<li className="flex items-start gap-2.5">
|
||||
<Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
|
||||
<span>Gestion proactive et surveillance 24h/24 pour éviter les pannes</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2.5">
|
||||
<Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
|
||||
<span>Serveurs et sauvegardes 100% situés physiquement en Belgique</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2.5">
|
||||
<Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
|
||||
<span>Tableau de bord AEGIS en temps réel pour une transparence totale</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import { useState } from 'react';
|
||||
import { CheckCircle, User, Building, Mail, MessageSquare } from 'lucide-react';
|
||||
|
||||
export default function ContactSection() {
|
||||
const [formStatus, setFormStatus] = useState<'idle' | 'submitting' | 'success'>('idle');
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-24 bg-white dark:bg-slate-900 border-t border-slate-200/80 dark:border-slate-800 transition-colors">
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center mb-12 space-y-2">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Demandez votre diagnostic
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
Un premier bilan rapide de votre infrastructure, sans engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{formStatus === 'success' ? (
|
||||
<div className="bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 p-8 rounded-[28px] text-center space-y-3">
|
||||
<CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Demande bien reçue !</h3>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-300 max-w-md mx-auto">
|
||||
Merci. Un spécialiste GISE étudiera vos besoins et vous recontactera très rapidement.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setFormStatus('idle')}
|
||||
className="mt-4 text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
Envoyer un autre message
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
setFormStatus('submitting');
|
||||
|
||||
const formData = new FormData(event.currentTarget);
|
||||
// Remplacement de la clé par la variable d'environnement
|
||||
formData.append("access_key", import.meta.env.VITE_WEB3FORMS_KEY);
|
||||
formData.append("subject", "Demande de diagnostic (Site GISE)");
|
||||
|
||||
try {
|
||||
const response = await fetch(import.meta.env.VITE_URL_API_WEB3FORMS, {
|
||||
method: "POST",
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setFormStatus('success');
|
||||
} else {
|
||||
setFormStatus('idle');
|
||||
alert("Erreur lors de l'envoi : " + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
setFormStatus('idle');
|
||||
alert("Erreur de connexion. Veuillez réessayer.");
|
||||
}
|
||||
}}
|
||||
className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px] shadow-sm"
|
||||
>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{/* CHAMP NOM */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Nom & Prénom
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
|
||||
placeholder="Jean Dupont"
|
||||
/>
|
||||
<User className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CHAMP SOCIÉTÉ */}
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Société / Cabinet
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
|
||||
placeholder="Cabinet Dupont & Associés"
|
||||
/>
|
||||
<Building className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{/* CHAMP EMAIL */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Email professionnel
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
|
||||
placeholder="jean@dupont-avocats.be"
|
||||
/>
|
||||
<Mail className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CHAMP SELECT */}
|
||||
<div>
|
||||
<label htmlFor="size" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Taille du parc informatique
|
||||
</label>
|
||||
<select
|
||||
id="size"
|
||||
name="taille_parc"
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
|
||||
>
|
||||
<option value="5 à 15 postes">5 à 15 postes</option>
|
||||
<option value="15 à 50 postes">15 à 50 postes</option>
|
||||
<option value="Plus de 50 postes">Plus de 50 postes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CHAMP MESSAGE */}
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Votre besoin principal
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
required
|
||||
id="message"
|
||||
name="message"
|
||||
rows={4}
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs resize-none transition-all"
|
||||
placeholder="Décrivez brièvement votre informatique actuelle..."
|
||||
/>
|
||||
<MessageSquare className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Protection Anti-spam native de Web3Forms */}
|
||||
<input type="checkbox" name="botcheck" className="hidden" style={{ display: 'none' }} />
|
||||
|
||||
{/* BOUTON SUBMIT */}
|
||||
<button
|
||||
disabled={formStatus === 'submitting'}
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 rounded-full transition-all flex items-center justify-center gap-2 shadow-sm disabled:opacity-70 text-xs active:scale-95"
|
||||
>
|
||||
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Activity, Check, Server, ShieldCheck } from "lucide-react";
|
||||
|
||||
export default function EngagementsSection() {
|
||||
return (
|
||||
<section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
|
||||
Prise en charge globale
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Les 3 piliers de votre tranquillité informatique
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
Nous assumons la responsabilité technique complète de vos équipements et de vos données.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Pilier 1 */}
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
|
||||
<Server className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">1. Cloud Privé Souverain & Accès Sécurisé</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Vos logiciels et fichiers sont hébergés sur nos propres serveurs <strong>100% situés en Belgique</strong>. Vos équipes travaillent depuis le bureau ou à distance en toute sécurité.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Données confidentielles conservées en Belgique</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Accès à distance simple et rapide pour vos employés</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Protection contre le vol ou la perte de documents</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Pilier 2 */}
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
|
||||
<ShieldCheck className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">2. Protection Anti-Piratage & Sauvegardes</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Vos réseaux sont protégés contre les virus et le chantage au chiffrement. Vos fichiers essentiels sont <strong>sauvegardés automatiquement hors-site</strong>.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Blocage automatique des attaques et piratages</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Sauvegardes quotidiennes isolées et sécurisées</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Restauration de vos fichiers en cas de problème</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Pilier 3 */}
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
|
||||
<Activity className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">3. Supervision 24/7 & Assistance VIP</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Nous surveillons l'état de votre matériel en continu pour <strong>anticiper et corriger les pannes</strong>. Vous bénéficiez d'un contact direct avec votre spécialiste.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Surveillance permanente de vos serveurs</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interventions préventives avant le blocage</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interlocuteur dédié sans répondeur ni robot</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { CheckCircle, ChevronRight, Sparkles } from "lucide-react";
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="pt-36 pb-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto flex flex-col items-center text-center">
|
||||
|
||||
{/* Google Pill Chip */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#edf2fa] dark:bg-slate-900 border border-blue-100 dark:border-slate-800 text-xs text-blue-700 dark:text-blue-300 font-medium mb-8">
|
||||
<Sparkles className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />
|
||||
<span>Infogérance & Cybersécurité Souveraine en Belgique</span>
|
||||
</div>
|
||||
|
||||
{/* H1 Main Heading */}
|
||||
<h1 className="text-4xl sm:text-6xl md:text-7xl font-bold text-slate-900 dark:text-white tracking-tight mb-6 max-w-4xl leading-[1.15]">
|
||||
Concentrez-vous sur votre métier.{' '}
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
Nous gérons votre informatique.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-base sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mb-10 leading-relaxed font-normal">
|
||||
GISE prend la responsabilité globale de votre infrastructure, de vos réseaux et de votre sécurité. Libérez votre entreprise des pannes grâce à notre Cloud souverain et à notre portail AEGIS.
|
||||
</p>
|
||||
|
||||
{/* Action Buttons (Google Material Pills) */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
|
||||
<a
|
||||
href="#contact"
|
||||
className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
|
||||
>
|
||||
<span>Obtenir un diagnostic</span>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="#aegis"
|
||||
className="px-8 py-3.5 text-sm font-semibold rounded-full text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/80 transition-all flex items-center justify-center shadow-sm"
|
||||
>
|
||||
Explorer le Portail AEGIS
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Feature Pill Tags */}
|
||||
<div className="mt-16 pt-8 border-t border-slate-200/80 dark:border-slate-800/80 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-slate-600 dark:text-slate-400 w-full max-w-3xl">
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>100% Hébergé en Belgique</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>Sauvegardes Inviolables</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>Accès Nomade Sécurisé</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>Supervision 24/7 Proactive</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { Calculator, Scale, Stethoscope } from "lucide-react";
|
||||
|
||||
export default function SectorsSection (){
|
||||
return(
|
||||
<section id="secteurs" className="py-20 bg-white/60 dark:bg-slate-900/85 border-t border-slate-200/80 dark:border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
|
||||
Secteurs Privilégiés
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Adapté aux exigences de votre profession
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Avocats */}
|
||||
<div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center">
|
||||
<Scale className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Cabinets d'Avocats & Notaires</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
<strong>Secret professionnel :</strong> Connexion chiffrée à distance depuis les tribunaux. Garantie de confidentialité absolue pour vos pièces de procédure.
|
||||
</p>
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Coffre-fort chiffré</span>
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Accès Nomade</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comptables */}
|
||||
<div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
|
||||
<Calculator className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Fiduciaires & Comptables</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
<strong>Sérénité pendant les clôtures :</strong> Protection contre les blocages malveillants de vos fichiers comptables. Zéro mauvaise surprise fiscale.
|
||||
</p>
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Sauvegardes Inviolables</span>
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Uptime Garantit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Santé */}
|
||||
<div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
|
||||
<Stethoscope className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Cliniques Privées & Santé</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
<strong>Données de santé :</strong> Protection renforcée de vos dossiers patients et de vos ordinateurs de consultation contre les intrusions.
|
||||
</p>
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Données Protégées</span>
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Réseau Isolé</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import LegalNavbar from '@components/layout/LegalNavbar';
|
||||
import SimpleFooter from '@components/layout/SimpleFooter';
|
||||
|
||||
export default function LegalLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<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">
|
||||
<LegalNavbar />
|
||||
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<SimpleFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,158 +1,92 @@
|
||||
import {
|
||||
Shield,
|
||||
ArrowLeft,
|
||||
FileText,
|
||||
Briefcase,
|
||||
Lock,
|
||||
Scale,
|
||||
Moon,
|
||||
Sun,
|
||||
FileCheck
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
import { FileText, Briefcase, Lock, Scale, FileCheck } from 'lucide-react';
|
||||
import LegalLayout from '@layouts/LegalLayout';
|
||||
|
||||
export default function ConditionsGenerales() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* HEADER DE NAVIGATION (Style Google Pill Bar) */}
|
||||
<header className="sticky top-0 z-40 p-3 sm:p-4">
|
||||
<div className="max-w-5xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
|
||||
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-xs font-semibold px-3.5 py-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<span>Retour à l'accueil</span>
|
||||
</Link>
|
||||
<LegalLayout>
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<FileCheck className="w-3.5 h-3.5" />
|
||||
<span>Cadre Contractuel</span>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
|
||||
Conditions Générales de Services (CGS)
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 pt-1">
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-slate-200/60 dark:bg-slate-800 font-medium">
|
||||
Mise à jour : {new Date().toLocaleDateString('fr-BE')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* SECTION 1 - OBJET */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
GISE
|
||||
</span>
|
||||
<div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
|
||||
<FileText className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
1. Objet des services
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Les présentes Conditions Générales de Services (CGS) ont pour objet de définir le cadre contractuel dans lequel GISE SRL fournit au Client ses services informatiques d'audit d'infrastructure, d'infogérance souveraine, d'hébergement privé et de cybersécurité.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* CONTENU PRINCIPAL */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<FileCheck className="w-3.5 h-3.5" />
|
||||
<span>Cadre Contractuel</span>
|
||||
{/* SECTION 2 - OBLIGATION DE MOYENS */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
|
||||
<Briefcase className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
2. Engagements & Obligation de moyens
|
||||
</h2>
|
||||
</div>
|
||||
<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>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Dans le domaine de la cybersécurité et des infrastructures informatiques, GISE déploie les meilleures pratiques du secteur et s'engage à une <strong className="text-slate-900 dark:text-white font-semibold">obligation de moyens renforcée</strong>. Nous mettons en œuvre l'ensemble des mesures techniques, organisationnelles et matérielles nécessaires pour garantir la santé, la disponibilité et la protection du système d'information du Client.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
|
||||
<section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<Lock className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
3. Secret professionnel et Confidentialité
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
GISE s'engage à observer le <strong className="font-semibold text-slate-900 dark:text-white">secret professionnel le plus strict</strong> concernant l'ensemble des informations, données, fichiers et documents confidentiels auxquels elle pourrait avoir accès dans le cadre de l'exécution de ses prestations.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 - OBJET */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
|
||||
<FileText className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
1. Objet des services
|
||||
</h2>
|
||||
{/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
|
||||
<Scale className="w-5 h-5" />
|
||||
</div>
|
||||
|
||||
<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é.
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
4. Droit applicable et juridiction compétente
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Les présentes Conditions Générales de Services sont régies exclusivement par le droit belge.
|
||||
</p>
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs text-slate-700 dark:text-slate-300 space-y-1.5">
|
||||
<p className="font-bold text-slate-900 dark:text-white text-sm">Juridiction exclusive</p>
|
||||
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
En cas de litige relatif à l'interprétation, la validité ou l'exécution des présentes CGS, et à défaut de résolution amiable, les <strong className="text-slate-900 dark:text-white font-medium">tribunaux de l'arrondissement judiciaire de Bruxelles</strong> seront seuls compétents.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2 - OBLIGATION DE MOYENS */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
|
||||
<Briefcase className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
2. Engagements & Obligation de moyens
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Dans le domaine de la cybersécurité et des infrastructures informatiques, GISE déploie les meilleures pratiques du secteur et s'engage à une <strong className="text-slate-900 dark:text-white font-semibold">obligation de moyens renforcée</strong>. Nous mettons en œuvre l'ensemble des mesures techniques, organisationnelles et matérielles nécessaires pour garantir la santé, la disponibilité et la protection du système d'information du Client.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
|
||||
<section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<Lock className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
3. Secret professionnel et Confidentialité
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
|
||||
GISE s'engage à observer le <strong className="font-semibold text-slate-900 dark:text-white">secret professionnel le plus strict</strong> concernant l'ensemble des informations, données, fichiers et documents confidentiels auxquels elle pourrait avoir accès dans le cadre de l'exécution de ses prestations.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
|
||||
<Scale className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
4. Droit applicable et juridiction compétente
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Les présentes Conditions Générales de Services sont régies exclusivement par le droit belge.
|
||||
</p>
|
||||
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs text-slate-700 dark:text-slate-300 space-y-1.5">
|
||||
<p className="font-bold text-slate-900 dark:text-white text-sm">Juridiction exclusive</p>
|
||||
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
En cas de litige relatif à l'interprétation, la validité ou l'exécution des présentes CGS, et à défaut de résolution amiable, les <strong className="text-slate-900 dark:text-white font-medium">tribunaux de l'arrondissement judiciaire de Bruxelles</strong> seront seuls compétents.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
+20
-703
@@ -1,712 +1,29 @@
|
||||
import { useState, useEffect } from '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 { useTheme } from '../hooks/useTheme';
|
||||
import AnimatedSvgBackground from '../components/AnimatedSvBackground';
|
||||
import AnimatedSvgBackground from '@components/AnimatedSvBackground';
|
||||
import Navbar from '@components/layout/Navbar';
|
||||
import Footer from '@components/layout/Footer';
|
||||
import CookieBanner from '@components/common/CookieBanner';
|
||||
|
||||
import HeroSection from '@features/landing/HeroSection';
|
||||
import EngagementsSection from '@features/landing/EngagementsSection';
|
||||
import AegisSection from '@features/landing/AegisSection';
|
||||
import SectorsSection from '@features/landing/SectorsSection';
|
||||
import ComparativeSection from '@features/landing/ComparativeSection';
|
||||
import ContactSection from '@features/landing/ContactSection';
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
|
||||
<AnimatedSvgBackground />
|
||||
|
||||
<div className="relative z-10">
|
||||
|
||||
{/* NAVBAR (Style Google Bar avec conteneur arrondi flottant) */}
|
||||
<header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
|
||||
<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>
|
||||
|
||||
{/* Nav Links (Material Chips Navigation) */}
|
||||
<nav className="hidden md:flex items-center gap-1 font-medium text-xs text-slate-600 dark:text-slate-300">
|
||||
<a href="#engagements" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||
Nos Engagements
|
||||
</a>
|
||||
<a href="#aegis" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||
Portail AEGIS
|
||||
</a>
|
||||
<a href="#secteurs" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||
Secteurs
|
||||
</a>
|
||||
<a href="#comparatif" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
|
||||
Pourquoi GISE
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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>
|
||||
|
||||
{/* H1 Main Heading */}
|
||||
<h1 className="text-4xl sm:text-6xl md:text-7xl font-bold text-slate-900 dark:text-white tracking-tight mb-6 max-w-4xl leading-[1.15]">
|
||||
Concentrez-vous sur votre métier.{' '}
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
Nous gérons votre informatique.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-base sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mb-10 leading-relaxed font-normal">
|
||||
GISE prend la responsabilité globale de votre infrastructure, de vos réseaux et de votre sécurité. Libérez votre entreprise des pannes grâce à notre Cloud souverain et à notre portail AEGIS.
|
||||
</p>
|
||||
|
||||
{/* Action Buttons (Google Material Pills) */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
|
||||
<a
|
||||
href="#contact"
|
||||
className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
|
||||
>
|
||||
<span>Obtenir un diagnostic</span>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="#aegis"
|
||||
className="px-8 py-3.5 text-sm font-semibold rounded-full text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/80 transition-all flex items-center justify-center shadow-sm"
|
||||
>
|
||||
Explorer le Portail AEGIS
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Feature Pill Tags */}
|
||||
<div className="mt-16 pt-8 border-t border-slate-200/80 dark:border-slate-800/80 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-slate-600 dark:text-slate-400 w-full max-w-3xl">
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>100% Hébergé en Belgique</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>Sauvegardes Inviolables</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>Accès Nomade Sécurisé</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
|
||||
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
|
||||
<span>Supervision 24/7 Proactive</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- SECTION NOS ENGAGEMENTS (Material Design 3 Surface Cards) --- */}
|
||||
<section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
|
||||
Prise en charge globale
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Les 3 piliers de votre tranquillité informatique
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
Nous assumons la responsabilité technique complète de vos équipements et de vos données.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Pilier 1 */}
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
|
||||
<Server className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">1. Cloud Privé Souverain & Accès Sécurisé</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Vos logiciels et fichiers sont hébergés sur nos propres serveurs <strong>100% situés en Belgique</strong>. Vos équipes travaillent depuis le bureau ou à distance en toute sécurité.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Données confidentielles conservées en Belgique</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Accès à distance simple et rapide pour vos employés</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Protection contre le vol ou la perte de documents</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Pilier 2 */}
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
|
||||
<ShieldCheck className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">2. Protection Anti-Piratage & Sauvegardes</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Vos réseaux sont protégés contre les virus et le chantage au chiffrement. Vos fichiers essentiels sont <strong>sauvegardés automatiquement hors-site</strong>.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Blocage automatique des attaques et piratages</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Sauvegardes quotidiennes isolées et sécurisées</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Restauration de vos fichiers en cas de problème</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Pilier 3 */}
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
|
||||
<Activity className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">3. Supervision 24/7 & Assistance VIP</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Nous surveillons l'état de votre matériel en continu pour <strong>anticiper et corriger les pannes</strong>. Vous bénéficiez d'un contact direct avec votre spécialiste.
|
||||
</p>
|
||||
<ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Surveillance permanente de vos serveurs</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interventions préventives avant le blocage</li>
|
||||
<li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interlocuteur dédié sans répondeur ni robot</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- SECTION PORTAIL AEGIS (Style Google Workspace / Admin Center) --- */}
|
||||
<section id="aegis" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
|
||||
Transparence Totale
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Le Portail AEGIS : Votre tableau de bord en temps réel
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
En tant que dirigeant, vous disposez d'un espace privé réassurant qui vous prouve chaque jour que votre entreprise est protégée.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-12 gap-8 items-center">
|
||||
|
||||
{/* Feature List Left (5 cols) */}
|
||||
<div className="lg:col-span-5 space-y-3">
|
||||
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="p-2 rounded-xl bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
|
||||
<Activity className="h-4 w-4" />
|
||||
</div>
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Suivi de Santé & Disponibilité</h4>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||
Visualisez l'état de marche de vos serveurs et de vos accès avec des indicateurs vert émeraude simples à lire.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="p-2 rounded-xl bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Sauvegardes & Menaces Neutralisées</h4>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||
Consultez la date exacte de votre dernière sauvegarde et le nombre d'intrusions bloquées ce mois-ci.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="p-2 rounded-xl bg-indigo-50 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400">
|
||||
<Lock className="h-4 w-4" />
|
||||
</div>
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-white">Coffre-Fort & Canal Direct</h4>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
|
||||
Stockez vos documents importants et contactez directement votre spécialiste d'un simple clic.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* UI Box Preview (Style Google Admin Console) (7 cols) */}
|
||||
<div className="lg:col-span-7 bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-lg space-y-5">
|
||||
|
||||
{/* App Header Bar */}
|
||||
<div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="h-3 w-3 rounded-full bg-emerald-500" />
|
||||
<span className="text-xs font-bold text-slate-900 dark:text-white">AEGIS Command Center</span>
|
||||
</div>
|
||||
<span className="text-[11px] font-semibold text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-200/60 dark:border-emerald-800/60">
|
||||
● Système Protégé
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Metric Rows */}
|
||||
<div className="space-y-3">
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="h-4 w-4 text-blue-600" />
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">Serveurs Cloud Privé (Belgique)</span>
|
||||
</div>
|
||||
<span className="font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-950 px-2.5 py-1 rounded-full">
|
||||
100% Opérationnel
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive className="h-4 w-4 text-emerald-600" />
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">Sauvegarde Automatique Hors-Site</span>
|
||||
</div>
|
||||
<span className="font-bold text-slate-600 dark:text-slate-400">
|
||||
Dernier check : Aujourd'hui à 04h00
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="h-4 w-4 text-indigo-600" />
|
||||
<span className="font-semibold text-slate-800 dark:text-slate-200">Tentatives d'Intrusion Bloquées (30j)</span>
|
||||
</div>
|
||||
<span className="font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950 px-2.5 py-1 rounded-full">
|
||||
1 420 Attaques Neutralisées
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-2xl bg-blue-50/50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900/50 text-xs text-slate-600 dark:text-slate-300 flex items-center gap-2.5">
|
||||
<Zap className="h-4 w-4 text-blue-600 shrink-0" />
|
||||
<span><em>Demande d'évolution : demandez un nouvel accès ou une extension en 1 clic depuis votre espace.</em></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- SECTEURS D'ACTIVITÉ (Google Material Category Cards) --- */}
|
||||
<section id="secteurs" className="py-20 bg-white/60 dark:bg-slate-900/85 border-t border-slate-200/80 dark:border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
|
||||
Secteurs Privilégiés
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Adapté aux exigences de votre profession
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Avocats */}
|
||||
<div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center">
|
||||
<Scale className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Cabinets d'Avocats & Notaires</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
<strong>Secret professionnel :</strong> Connexion chiffrée à distance depuis les tribunaux. Garantie de confidentialité absolue pour vos pièces de procédure.
|
||||
</p>
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Coffre-fort chiffré</span>
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Accès Nomade</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comptables */}
|
||||
<div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
|
||||
<Calculator className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Fiduciaires & Comptables</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
<strong>Sérénité pendant les clôtures :</strong> Protection contre les blocages malveillants de vos fichiers comptables. Zéro mauvaise surprise fiscale.
|
||||
</p>
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Sauvegardes Inviolables</span>
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Uptime Garantit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Santé */}
|
||||
<div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
|
||||
<div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
|
||||
<Stethoscope className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Cliniques Privées & Santé</h3>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
<strong>Données de santé :</strong> Protection renforcée de vos dossiers patients et de vos ordinateurs de consultation contre les intrusions.
|
||||
</p>
|
||||
<div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Données Protégées</span>
|
||||
<span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Réseau Isolé</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- 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 dark:bg-blue-950 border-2 border-blue-600/40 space-y-4 relative">
|
||||
|
||||
<h3 className="font-bold text-blue-600 dark:text-blue-400 text-xs uppercase tracking-wider">Offre GISE & AEGIS</h3>
|
||||
<ul className="space-y-3.5 text-xs text-slate-800 dark:text-slate-200 font-semibold">
|
||||
<li className="flex items-start gap-2.5">
|
||||
<Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
|
||||
<span>Gestion proactive et surveillance 24h/24 pour éviter les pannes</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2.5">
|
||||
<Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
|
||||
<span>Serveurs et sauvegardes 100% situés physiquement en Belgique</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2.5">
|
||||
<Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
|
||||
<span>Tableau de bord AEGIS en temps réel pour une transparence totale</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FORMULAIRE DE CONTACT (Web3Forms + Google Material Style) */}
|
||||
<section id="contact" className="py-24 bg-white dark:bg-slate-900 border-t border-slate-200/80 dark:border-slate-800 transition-colors">
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center mb-12 space-y-2">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
Demandez votre diagnostic
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
Un premier bilan rapide de votre infrastructure, sans engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{formStatus === 'success' ? (
|
||||
<div className="bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 p-8 rounded-[28px] text-center space-y-3">
|
||||
<CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">Demande bien reçue !</h3>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-300 max-w-md mx-auto">
|
||||
Merci. Un spécialiste GISE étudiera vos besoins et vous recontactera très rapidement.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setFormStatus('idle')}
|
||||
className="mt-4 text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
Envoyer un autre message
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={async (event) => {
|
||||
event.preventDefault();
|
||||
setFormStatus('submitting');
|
||||
|
||||
// Logique officielle Web3Forms
|
||||
const formData = new FormData(event.currentTarget);
|
||||
formData.append("access_key", "6d360b7b-731f-4cbc-b6d1-9e9f21504bcc"); // <-- Votre clé
|
||||
formData.append("subject", "Demande de diagnostic (Site GISE)");
|
||||
|
||||
try {
|
||||
const response = await fetch("https://api.web3forms.com/submit", {
|
||||
method: "POST",
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setFormStatus('success');
|
||||
} else {
|
||||
setFormStatus('idle');
|
||||
alert("Erreur lors de l'envoi : " + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
setFormStatus('idle');
|
||||
alert("Erreur de connexion. Veuillez réessayer.");
|
||||
}
|
||||
}}
|
||||
className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px] shadow-sm"
|
||||
>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Nom & Prénom
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
id="name"
|
||||
name="name" // Indispensable pour Web3Forms
|
||||
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>
|
||||
<label htmlFor="company" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Société / Cabinet
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
id="company"
|
||||
name="company" // Indispensable
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
|
||||
placeholder="Cabinet Dupont & Associés"
|
||||
/>
|
||||
<Building className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Email professionnel
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type="email"
|
||||
id="email"
|
||||
name="email" // Indispensable
|
||||
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>
|
||||
<label htmlFor="size" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Taille du parc informatique
|
||||
</label>
|
||||
<select
|
||||
id="size"
|
||||
name="taille_parc" // Nom du champ dans le mail
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
|
||||
>
|
||||
<option value="5 à 15 postes">5 à 15 postes</option>
|
||||
<option value="15 à 50 postes">15 à 50 postes</option>
|
||||
<option value="Plus de 50 postes">Plus de 50 postes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Votre besoin principal
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
required
|
||||
id="message"
|
||||
name="message" // Indispensable
|
||||
rows={4}
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs resize-none transition-all"
|
||||
placeholder="Décrivez brièvement votre informatique actuelle..."
|
||||
/>
|
||||
<MessageSquare className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Protection Anti-spam native de Web3Forms */}
|
||||
<input type="checkbox" name="botcheck" className="hidden" style={{ display: 'none' }} />
|
||||
|
||||
<button
|
||||
disabled={formStatus === 'submitting'}
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 rounded-full transition-all flex items-center justify-center gap-2 shadow-sm disabled:opacity-70 text-xs active:scale-95"
|
||||
>
|
||||
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FOOTER (Style Google Corporate Minimal Footer) */}
|
||||
<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 space-y-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
||||
<Shield className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<span className="font-bold text-slate-900 dark:text-white text-sm">GISE</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="/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">Cookies</Link>
|
||||
<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">CGS</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<p className="flex items-center gap-1.5">
|
||||
<Server className="w-3.5 h-3.5 text-blue-600" />
|
||||
Infrastructure souveraine 100% hébergée en Belgique.
|
||||
</p>
|
||||
<p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* COOKIE BANNER (Google Bottom Toast Style) */}
|
||||
{cookieConsent === null && (
|
||||
<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="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="space-y-1">
|
||||
<h4 className="text-xs font-bold text-slate-900 dark:text-white">Respect de votre vie privée</h4>
|
||||
<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é. Aucun traceur publicitaire n'est déployé.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<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
|
||||
</button>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Navbar />
|
||||
<HeroSection />
|
||||
<EngagementsSection />
|
||||
<AegisSection />
|
||||
<SectorsSection />
|
||||
<ComparativeSection />
|
||||
<ContactSection />
|
||||
<Footer />
|
||||
<CookieBanner />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+77
-126
@@ -1,145 +1,96 @@
|
||||
import { Shield, ArrowLeft, Mail, Server, FileCheck, Moon, Sun, Lock } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
import { Mail, Server, FileCheck, Lock } from 'lucide-react';
|
||||
import LegalLayout from '@layouts/LegalLayout';
|
||||
|
||||
export default function MentionsLegales() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<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">
|
||||
<LegalLayout>
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<FileCheck className="w-3.5 h-3.5" />
|
||||
<span>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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 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" />
|
||||
<span>Retour à l'accueil</span>
|
||||
</Link>
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 - COORDONNÉES DE CONTACT */}
|
||||
<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">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
GISE
|
||||
</span>
|
||||
<div 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU PRINCIPAL */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<FileCheck className="w-3.5 h-3.5" />
|
||||
<span>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.
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez contacter l'équipe GISE :
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 - COORDONNÉES DE CONTACT */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
<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">
|
||||
<div className="flex items-center gap-2.5 text-xs sm:text-sm text-slate-800 dark:text-slate-200">
|
||||
<Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
|
||||
<span><strong className="font-semibold text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Pour toute question concernant nos services ou le fonctionnement de ce site web, vous pouvez contacter l'équipe GISE :
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2 - HÉBERGEMENT DU SITE */}
|
||||
<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-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
</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 :
|
||||
</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 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">Hébergeur :</strong> Infrastructure privée GISE</span>
|
||||
</p>
|
||||
|
||||
<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">
|
||||
<div className="flex items-center gap-2.5 text-xs sm:text-sm text-slate-800 dark:text-slate-200">
|
||||
<Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
|
||||
<span><strong className="font-semibold text-slate-900 dark:text-white">E-mail :</strong> contact@gise.be</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2 - HÉBERGEMENT DU SITE */}
|
||||
<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-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
</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 :
|
||||
<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>
|
||||
|
||||
<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 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">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>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 - PROPRIÉTÉ INTELLECTUELLE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{/* SECTION 3 - PROPRIÉTÉ INTELLECTUELLE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||
</footer>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,222 +1,160 @@
|
||||
import {
|
||||
Shield,
|
||||
ArrowLeft,
|
||||
Database,
|
||||
UserCheck,
|
||||
Scale,
|
||||
Server,
|
||||
Moon,
|
||||
Sun,
|
||||
ShieldCheck,
|
||||
Lock,
|
||||
Mail,
|
||||
ExternalLink
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
import { Database, UserCheck, Scale, Server, ShieldCheck,Lock,Mail,ExternalLink } from 'lucide-react';
|
||||
import LegalLayout from '@layouts/LegalLayout';
|
||||
|
||||
export default function PolitiqueConfidentialite() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<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">
|
||||
<LegalLayout>
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<ShieldCheck className="w-3.5 h-3.5" />
|
||||
<span>Protection des Données & RGPD</span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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" />
|
||||
<span>Retour à l'accueil</span>
|
||||
</Link>
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 - DONNÉES COLLECTÉES ET FINALITÉS */}
|
||||
<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">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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>
|
||||
<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">
|
||||
<Database className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
1. Données collectées et finalités
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
GISE
|
||||
</span>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
|
||||
<h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
|
||||
<h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
{/* CONTENU PRINCIPAL */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<ShieldCheck className="w-3.5 h-3.5" />
|
||||
<span>Protection des Données & RGPD</span>
|
||||
{/* SECTION 2 - HÉBERGEMENT ET PARTAGE DES DONNÉES */}
|
||||
<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-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
</div>
|
||||
<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')}
|
||||
|
||||
<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>
|
||||
|
||||
<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 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 3 - VOS DROITS (RGPD) */}
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
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>
|
||||
|
||||
<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>
|
||||
<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é.
|
||||
</section>
|
||||
|
||||
{/* SECTION 4 - AUTORITÉ DE CONTRÔLE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
|
||||
<Scale className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
4. Réclamation auprès de l'autorité de contrôle
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
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 :
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 - DONNÉES COLLECTÉES ET FINALITÉS */}
|
||||
<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">
|
||||
<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">
|
||||
<Database className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
1. Données collectées et finalités
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
|
||||
<h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
|
||||
<h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2 - HÉBERGEMENT ET PARTAGE DES DONNÉES */}
|
||||
<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-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
<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>
|
||||
|
||||
<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 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 3 - VOS DROITS (RGPD) */}
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
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>
|
||||
|
||||
<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 4 - AUTORITÉ DE CONTRÔLE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
|
||||
<Scale className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
|
||||
4. Réclamation auprès de l'autorité de contrôle
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
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 :
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
+99
-156
@@ -1,173 +1,116 @@
|
||||
import {
|
||||
Shield,
|
||||
ArrowLeft,
|
||||
Cookie,
|
||||
Info,
|
||||
CheckCircle,
|
||||
Moon,
|
||||
Sun
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
import { Cookie, Info, CheckCircle } from 'lucide-react';
|
||||
import LegalLayout from '@layouts/LegalLayout';
|
||||
|
||||
export default function PolitiqueCookies() {
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<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">
|
||||
<LegalLayout>
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<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
|
||||
</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>
|
||||
|
||||
{/* 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" />
|
||||
<span>Retour à l'accueil</span>
|
||||
</Link>
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* SECTION 1 - QU'EST-CE QU'UN COOKIE */}
|
||||
<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">
|
||||
{/* BOUTON THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
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>
|
||||
|
||||
{/* LOGO */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
|
||||
GISE
|
||||
</span>
|
||||
<div 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 ?
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENU PRINCIPAL */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* Header Titre */}
|
||||
<div className="mb-10 space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
|
||||
<Cookie className="w-3.5 h-3.5" />
|
||||
<span>Respect de la vie privée</span>
|
||||
{/* SECTION 2 - ZÉRO TRACEUR COMMERCIAL */}
|
||||
<section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<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"
|
||||
</h2>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
|
||||
Politique des Cookies
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 - COOKIES UTILISÉS (TABLEAU MATERIAL) */}
|
||||
<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">
|
||||
<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
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<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>
|
||||
|
||||
{/* SECTION 1 - QU'EST-CE QU'UN COOKIE */}
|
||||
<section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
|
||||
<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 ?
|
||||
</h2>
|
||||
</div>
|
||||
<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>
|
||||
<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">Nom du cookie</th>
|
||||
<th className="py-3 px-4">Finalité</th>
|
||||
<th className="py-3 px-4">Durée de conservation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-200/60 dark:divide-slate-800/60 text-xs">
|
||||
<tr>
|
||||
<td className="py-3.5 px-4 font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||
gise_cookie_consent
|
||||
</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>
|
||||
<td className="py-3.5 px-4 font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||
theme
|
||||
</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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2 - ZÉRO TRACEUR COMMERCIAL */}
|
||||
<section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
|
||||
<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"
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3 - COOKIES UTILISÉS (TABLEAU MATERIAL) */}
|
||||
<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">
|
||||
<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
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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">Nom du cookie</th>
|
||||
<th className="py-3 px-4">Finalité</th>
|
||||
<th className="py-3 px-4">Durée de conservation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-200/60 dark:divide-slate-800/60 text-xs">
|
||||
<tr>
|
||||
<td className="py-3.5 px-4 font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||
gise_cookie_consent
|
||||
</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>
|
||||
<td className="py-3.5 px-4 font-mono font-semibold text-blue-600 dark:text-blue-400">
|
||||
theme
|
||||
</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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
|
||||
<p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,14 @@
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
"paths": {
|
||||
"@components/*": ["./src/components/*"],
|
||||
"@pages/*": ["./src/pages/*"],
|
||||
"@hooks/*": ["./src/hooks/*"],
|
||||
"@layouts/*": ["./src/layouts/*"],
|
||||
"@features/*": ["./src/features/*"]
|
||||
},
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
|
||||
+11
-1
@@ -1,5 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { resolve } from 'path';
|
||||
import react from '@vitejs/plugin-react-swc';
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
@@ -7,4 +8,13 @@ export default defineConfig({
|
||||
plugins: [react(),
|
||||
tailwindcss(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@components': resolve(__dirname, 'src/components'),
|
||||
'@hooks': resolve(__dirname, 'src/hooks'),
|
||||
'@pages': resolve(__dirname, 'src/pages'),
|
||||
'@features': resolve(__dirname, 'src/features'),
|
||||
'@layouts': resolve(__dirname, 'src/layouts'),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user