This commit is contained in:
LathanDevers
@@ -0,0 +1,2 @@
|
||||
VITE_WEB3FORMS_KEY=
|
||||
VITE_URL_API_WEB3FORMS=
|
||||
@@ -44,6 +44,8 @@ jobs:
|
||||
FTP_USER: ${{ secrets.FTP_USER_TEST }}
|
||||
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD_TEST }}
|
||||
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
||||
VITE_WEB3FORMS_KEY: ${{ secrets.WEB3FORMS_KEY }}
|
||||
VITE_URL_API_WEB3FORMS : ${{ secrets.URL_API_WEB3FORMS }}
|
||||
run: |
|
||||
cat << EOF > script.lftp
|
||||
set ftp:passive-mode true
|
||||
|
||||
@@ -44,6 +44,8 @@ jobs:
|
||||
FTP_USER: ${{ secrets.FTP_USER }}
|
||||
FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
|
||||
FTP_SERVER: ${{ secrets.FTP_SERVER }} # Doit contenir : 10.10.40.12
|
||||
VITE_WEB3FORMS_KEY: ${{ secrets.WEB3FORMS_KEY }}
|
||||
VITE_URL_API_WEB3FORMS : ${{ secrets.URL_API_WEB3FORMS }}
|
||||
run: |
|
||||
cat << EOF > script.lftp
|
||||
set ftp:passive-mode true
|
||||
|
||||
@@ -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",
|
||||
|
||||
+10
-7
@@ -1,16 +1,18 @@
|
||||
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 />
|
||||
|
||||
<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 />} />
|
||||
@@ -18,6 +20,7 @@ export default function App() {
|
||||
<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,61 +1,9 @@
|
||||
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>
|
||||
|
||||
<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>
|
||||
</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">
|
||||
|
||||
<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">
|
||||
@@ -73,7 +21,6 @@ export default function ConditionsGenerales() {
|
||||
</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">
|
||||
@@ -84,7 +31,6 @@ export default function ConditionsGenerales() {
|
||||
1. Objet des services
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
|
||||
Les présentes Conditions Générales de Services (CGS) ont pour objet de définir le cadre contractuel dans lequel GISE SRL fournit au Client ses services informatiques d'audit d'infrastructure, d'infogérance souveraine, d'hébergement privé et de cybersécurité.
|
||||
</p>
|
||||
@@ -100,7 +46,6 @@ export default function ConditionsGenerales() {
|
||||
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>
|
||||
@@ -116,7 +61,6 @@ export default function ConditionsGenerales() {
|
||||
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>
|
||||
@@ -132,11 +76,9 @@ export default function ConditionsGenerales() {
|
||||
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">
|
||||
@@ -144,15 +86,7 @@ export default function ConditionsGenerales() {
|
||||
</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>
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -1,51 +1,9 @@
|
||||
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">
|
||||
|
||||
{/* 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="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>
|
||||
</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">
|
||||
|
||||
<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">
|
||||
@@ -133,13 +91,6 @@ export default function MentionsLegales() {
|
||||
</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>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +1,9 @@
|
||||
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">
|
||||
|
||||
{/* 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="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>
|
||||
</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">
|
||||
|
||||
<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">
|
||||
@@ -210,13 +155,6 @@ export default function PolitiqueConfidentialite() {
|
||||
</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>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +1,9 @@
|
||||
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">
|
||||
|
||||
{/* 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="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>
|
||||
</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">
|
||||
|
||||
<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">
|
||||
@@ -161,13 +111,6 @@ export default function PolitiqueCookies() {
|
||||
</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>
|
||||
</LegalLayout>
|
||||
);
|
||||
}
|
||||
+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