This commit is contained in:
LathanDevers
+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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user