first test commit
This commit is contained in:
LathanDevers
@@ -0,0 +1,302 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Shield, Server, Lock, ChevronRight, Activity, Network, Briefcase, Stethoscope, FileText, CheckCircle, Moon, Sun } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTheme } from '../hooks/useTheme';
|
||||
|
||||
export default function GiseLandingPage() {
|
||||
const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
|
||||
const [formStatus, setFormStatus] = useState<'idle' | 'submitting' | 'success'>('idle');
|
||||
|
||||
// --- GESTION DU MODE CLAIR/SOMBRE ---
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
// -------------------------------------
|
||||
|
||||
// --- LOGIQUE DES COOKIES ---
|
||||
useEffect(() => {
|
||||
const getCookie = (name: string) => {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop()?.split(';').shift();
|
||||
return null;
|
||||
};
|
||||
const existingConsent = getCookie('gise_cookie_consent');
|
||||
if (existingConsent === 'true') setCookieConsent(true);
|
||||
else if (existingConsent === 'false') setCookieConsent(false);
|
||||
}, []);
|
||||
|
||||
const handleAcceptCookies = () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
|
||||
document.cookie = `gise_cookie_consent=true;expires=${date.toUTCString()};path=/;Secure;SameSite=Strict`;
|
||||
setCookieConsent(true);
|
||||
};
|
||||
|
||||
const handleRefuseCookies = () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
|
||||
document.cookie = `gise_cookie_consent=false;expires=${date.toUTCString()};path=/;Secure;SameSite=Strict`;
|
||||
setCookieConsent(false);
|
||||
};
|
||||
|
||||
const handleResetCookies = () => {
|
||||
document.cookie = "gise_cookie_consent=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||||
setCookieConsent(null);
|
||||
};
|
||||
// ---------------------------
|
||||
|
||||
const handleContactSubmit = (e: React.SubmitEvent) => {
|
||||
e.preventDefault();
|
||||
setFormStatus('submitting');
|
||||
setTimeout(() => setFormStatus('success'), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen font-sans selection:bg-gise-accent selection:text-white transition-colors duration-300">
|
||||
|
||||
{/* NAVIGATION */}
|
||||
<nav className="fixed w-full z-40 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-8 w-8 text-gise-accent" />
|
||||
<span className="text-2xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
|
||||
</div>
|
||||
<div className="hidden md:flex space-x-8 text-sm font-medium text-slate-600 dark:text-slate-300">
|
||||
<a href="#expertise" className="hover:text-gise-accent dark:hover:text-white transition-colors">Expertise</a>
|
||||
<a href="#solutions" className="hover:text-gise-accent dark:hover:text-white transition-colors">Solutions</a>
|
||||
<a href="#industries" className="hover:text-gise-accent dark:hover:text-white transition-colors">Secteurs</a>
|
||||
<a href="#contact" className="hover:text-gise-accent dark:hover:text-white transition-colors">Contact</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* BOUTON TOGGLE THEME */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
|
||||
aria-label="Basculer le thème"
|
||||
>
|
||||
{isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
||||
</button>
|
||||
|
||||
<a href="#contact" className="hidden md:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gise-accent hover:bg-gise-accentHover transition-colors">
|
||||
Réponse à Incident
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* HERO SECTION */}
|
||||
<section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-200 dark:bg-slate-800/50 border border-slate-300 dark:border-slate-700 text-sm text-slate-700 dark:text-slate-300 mb-8 transition-colors">
|
||||
<Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
<span>Cabinet d'Expertise en Cybersécurité B2B</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-6 transition-colors">
|
||||
Protégez votre patrimoine numérique <br className="hidden md:block"/> avec une exigence <span className="text-transparent bg-clip-text bg-linear-to-r from-blue-600 to-gise-accent dark:from-blue-400 dark:to-gise-accent">absolue.</span>
|
||||
</h1>
|
||||
|
||||
<p className="mt-4 text-xl text-slate-600 dark:text-slate-400 max-w-3xl mb-10 transition-colors">
|
||||
Nous concevons, infogérons et sécurisons les infrastructures informatiques des cabinets d'avocats, cliniques privées et fiduciaires. Hébergement souverain et confidentialité totale de vos données.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#contact" className="px-8 py-4 text-base font-bold rounded-md text-white bg-gise-accent hover:bg-gise-accentHover transition-all flex items-center justify-center gap-2">
|
||||
Demander un Audit <ChevronRight className="w-5 h-5" />
|
||||
</a>
|
||||
<a href="#solutions" className="px-8 py-4 text-base font-medium rounded-md text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all flex items-center justify-center">
|
||||
Découvrir nos Solutions
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* EXPERTISE */}
|
||||
<section id="expertise" className="py-20 bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Notre Expertise Fondamentale</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400">Le socle de votre tranquillité d'esprit numérique.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: Activity, title: "Audit & Cartographie", desc: "Diagnostic approfondi de votre architecture, analyse des vulnérabilités de surface et rapport d'impact stratégique." },
|
||||
{ icon: Server, title: "Refonte Cloud Privé", desc: "Migration de vos serveurs vétustes vers nos hyperviseurs Bare-Metal souverains, infogérés en circuit fermé." },
|
||||
{ icon: Lock, title: "Infogérance & Monitoring", desc: "Supervision 24/7 de vos nœuds de calcul, support premium et réponse aux incidents en temps réel." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="bg-white dark:bg-slate-800 p-8 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-gise-accent dark:hover:border-gise-accent transition-colors">
|
||||
<item.icon className="h-10 w-10 text-gise-accent mb-6" />
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">{item.title}</h3>
|
||||
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SOLUTIONS */}
|
||||
<section id="solutions" className="py-24 bg-white dark:bg-slate-950 relative overflow-hidden transition-colors">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-200 h-200 bg-gise-accent/10 blur-[120px] rounded-full pointer-events-none"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Des Solutions Technologiques Sur-Mesure</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 max-w-2xl">Au-delà du conseil, nous déployons pour vous des environnements numériques ultra-sécurisés, vous garantissant un contrôle absolu sur vos données et vos communications.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Portail VIP */}
|
||||
<div className="bg-linear-to-br from-slate-200 dark:from-slate-800 to-slate-100 dark:to-slate-900 p-1 rounded-2xl">
|
||||
<div className="bg-white dark:bg-slate-900 h-full p-8 md:p-12 rounded-xl transition-colors">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Shield className="h-8 w-8 text-emerald-500 dark:text-emerald-400" />
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white">Espace Client & Coffre-Fort</h3>
|
||||
</div>
|
||||
<p className="text-lg text-slate-700 dark:text-slate-300 mb-8">Un portail privé dédié à la réassurance et à la gestion de vos actifs les plus sensibles.</p>
|
||||
<ul className="space-y-4 text-slate-600 dark:text-slate-400">
|
||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5" /> <span>Tableau de bord de suivi en temps réel de la santé de vos serveurs (Uptime, Charge).</span></li>
|
||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5" /> <span>Stockage chiffré de bout en bout pour vos mots de passe et documents confidentiels.</span></li>
|
||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5" /> <span>Canal de communication direct et hermétique avec votre ingénieur dédié.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Réseau */}
|
||||
<div className="bg-linear-to-br from-slate-200 dark:from-slate-800 to-slate-100 dark:to-slate-900 p-1 rounded-2xl">
|
||||
<div className="bg-white dark:bg-slate-900 h-full p-8 md:p-12 rounded-xl transition-colors">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Network className="h-8 w-8 text-blue-500 dark:text-blue-400" />
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white">Architecture Réseau Zero-Trust</h3>
|
||||
</div>
|
||||
<p className="text-lg text-slate-700 dark:text-slate-300 mb-8">L'interconnexion inviolable de vos différentes succursales et infrastructures.</p>
|
||||
<ul className="space-y-4 text-slate-600 dark:text-slate-400">
|
||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400 shrink-0 mt-0.5" /> <span>Réseau segmenté interdisant par défaut toute connexion non authentifiée (Zero-Trust).</span></li>
|
||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400 shrink-0 mt-0.5" /> <span>Tunnels VPN privés (WireGuard) rendant vos flux invisibles sur internet.</span></li>
|
||||
<li className="flex items-start gap-3"><CheckCircle className="h-5 w-5 text-blue-500 dark:text-blue-400 shrink-0 mt-0.5" /> <span>Filtrage de flux applicatif et pare-feu d'entreprise de dernière génération.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* INDUSTRIES */}
|
||||
<section id="industries" className="py-20 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-3xl font-bold text-center text-slate-900 dark:text-white mb-16">Des solutions pensées pour les données critiques</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6 text-center">
|
||||
<div className="p-6">
|
||||
<Briefcase className="w-12 h-12 text-slate-400 dark:text-slate-500 mx-auto mb-4" />
|
||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2">Cabinets d'Avocats</h4>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">Secret professionnel garanti par des environnements de stockage étanches.</p>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<Stethoscope className="w-12 h-12 text-slate-400 dark:text-slate-500 mx-auto mb-4" />
|
||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2">Cliniques Privées</h4>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">Protection absolue et souveraineté des données de santé à caractère personnel.</p>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<FileText className="w-12 h-12 text-slate-400 dark:text-slate-500 mx-auto mb-4" />
|
||||
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2">Fiduciaires & Comptables</h4>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">Continuité de service et intégrité totale des flux financiers de vos clients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CONTACT */}
|
||||
<section id="contact" className="py-24 bg-white dark:bg-slate-950 transition-colors">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Entrons en contact</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400">Pour un audit de sécurité ou une urgence, notre équipe vous répond sous 2 heures.</p>
|
||||
</div>
|
||||
|
||||
{formStatus === 'success' ? (
|
||||
<div className="bg-emerald-100 dark:bg-emerald-900/30 border border-emerald-300 dark:border-emerald-500/50 p-8 rounded-xl text-center">
|
||||
<CheckCircle className="w-16 h-16 text-emerald-500 dark:text-emerald-400 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">Message Envoyé</h3>
|
||||
<p className="text-emerald-800 dark:text-emerald-200">Nos experts ont bien reçu votre demande et vous recontacteront dans les plus brefs délais.</p>
|
||||
<button onClick={() => setFormStatus('idle')} className="mt-6 text-sm text-emerald-600 dark:text-emerald-400 hover:underline">Envoyer un autre message</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleContactSubmit} className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nom complet</label>
|
||||
<input required type="text" id="name" className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent" placeholder="Jean Dupont" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Entreprise / Cabinet</label>
|
||||
<input required type="text" id="company" className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent" placeholder="Cabinet Dupont & Associés" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email professionnel</label>
|
||||
<input required type="email" id="email" className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent" placeholder="jean@cabinet-dupont.fr" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Votre besoin</label>
|
||||
<textarea required id="message" rows={4} className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gise-accent resize-none" placeholder="Décrivez brièvement votre infrastructure ou l'incident en cours..."></textarea>
|
||||
</div>
|
||||
<button disabled={formStatus === 'submitting'} type="submit" className="w-full bg-gise-accent hover:bg-gise-accentHover text-white font-bold py-4 rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-70">
|
||||
{formStatus === 'submitting' ? 'Envoi en cours...' : 'Envoyer la demande'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-12 mt-12 transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center md:items-start gap-8 mb-8">
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Shield className="h-8 w-8 text-slate-400 dark:text-slate-700" />
|
||||
<span className="text-2xl font-bold tracking-wider text-slate-400 dark:text-slate-700">GISE</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center md:justify-end gap-x-8 gap-y-4 text-sm font-medium text-slate-500 dark:text-slate-400">
|
||||
<Link to="/mentions-legales" className="hover:text-slate-900 dark:hover:text-white transition-colors">Mentions Légales</Link>
|
||||
<Link to="/politique-confidentialite" className="hover:text-slate-900 dark:hover:text-white transition-colors">Politique de Confidentialité</Link>
|
||||
<Link to="/politique-cookies" className="hover:text-slate-900 dark:hover:text-white transition-colors">Politique des Cookies</Link>
|
||||
<button onClick={handleResetCookies} className="hover:text-slate-900 dark:hover:text-white transition-colors text-left underline decoration-slate-400 dark:decoration-slate-600 underline-offset-4">Gérer mes cookies</button>
|
||||
<Link to="/cgs" className="hover:text-slate-900 dark:hover:text-white transition-colors">Conditions Générales (CGS)</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-8 border-t border-slate-200 dark:border-slate-900/50 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500 dark:text-slate-600">
|
||||
<p className="flex items-center gap-1">
|
||||
<Server className="w-3 h-3" />
|
||||
Infrastructure souveraine hébergée en Belgique (UE).
|
||||
</p>
|
||||
<p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* COOKIE BANNER */}
|
||||
{cookieConsent === null && (
|
||||
<div className="fixed bottom-0 left-0 right-0 p-4 z-50 animate-in slide-in-from-bottom-10 fade-in duration-500">
|
||||
<div className="max-w-5xl mx-auto bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-2xl rounded-lg p-6 flex flex-col sm:flex-row items-center justify-between gap-6 transition-colors">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-slate-900 dark:text-white font-bold mb-2">Gestion de vos données (RGPD)</h4>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
GISE utilise uniquement des cookies strictement nécessaires au fonctionnement du site et à la sécurité de votre navigation. Aucun traceur publicitaire ou de revente de données n'est déployé sur nos environnements.
|
||||
<Link to="/politique-cookies" className="text-gise-accent hover:text-blue-600 dark:hover:text-blue-400 hover:underline ml-2 transition-colors">
|
||||
Lire notre politique
|
||||
</Link>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3 shrink-0">
|
||||
<button onClick={handleRefuseCookies} className="px-6 py-2 text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white border border-slate-300 dark:border-slate-600 rounded hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
|
||||
Refuser
|
||||
</button>
|
||||
<button onClick={handleAcceptCookies} className="px-6 py-2 text-sm font-medium text-white bg-gise-accent hover:bg-gise-accentHover rounded transition-colors">
|
||||
Accepter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user