Hugging Face's logo

Spaces:
Maheri
/
csc
Running

App Files Community
csc / index.html
Maheri's picture
Maheri
Add 3 files
4cec6c9 verified
raw
history blame contribute delete
41.9 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberShield Conseils | Expertise Européenne en Cybersécurité</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'cyber-blue': '#0d47a1',
'cyber-cyan': '#00bcd4',
'cyber-dark': '#0a1930',
'cyber-gray': '#37474f',
'cyber-accent': '#3d5afe'
},
fontFamily: {
'heading': ['Raleway', 'sans-serif'],
'body': ['Poppins', 'sans-serif']
}
}
}
}
</script>
<style>
body {
overflow-x: hidden;
scroll-behavior: smooth;
}
.hero-pattern {
background: radial-gradient(circle at top right, rgba(13, 71, 161, 0.7) 0%, rgba(10, 25, 48, 0.9) 70%), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 C0,0 20,30 50,30 S100,0 100,0 L100,100 L0,100 Z" fill="%230d47a1"/></svg>') no-repeat bottom center;
background-size: cover;
}
.tech-bg {
background: linear-gradient(to bottom, #0a1930, #1a237e);
}
.regulation-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: linear-gradient(135deg, rgba(13,71,161,0.1), rgba(10,25,48,0.2));
border: 1px solid rgba(61, 90, 254, 0.2);
}
.regulation-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 30px -15px rgba(0, 188, 212, 0.3);
}
.future-card {
background: linear-gradient(135deg, rgba(10,25,48,0.8), rgba(0,188,212,0.15));
backdrop-filter: blur(10px);
border: 1px solid rgba(61, 90, 254, 0.3);
}
.grid-pattern {
background-image:
linear-gradient(rgba(61, 90, 254, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(61, 90, 254, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.6); }
70% { box-shadow: 0 0 0 15px rgba(0, 188, 212, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 188, 212, 0); }
}
.glow {
text-shadow: 0 0 10px rgba(0, 188, 212, 0.7);
}
</style>
</head>
<body class="bg-cyber-dark text-gray-100 font-body">
<!-- Navigation -->
<nav class="bg-cyber-dark bg-opacity-90 backdrop-blur-sm py-4 px-6 fixed w-full z-50 border-b border-cyber-blue">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-cyber-cyan mr-3 flex items-center justify-center">
<i class="fas fa-shield-alt text-cyber-dark text-xl"></i>
</div>
<span class="text-2xl font-bold font-heading text-cyber-cyan">CyberShield<span class="text-white">Conseils</span></span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#threats" class="hover:text-cyber-cyan transition">Menaces</a>
<a href="#regulations" class="hover:text-cyber-cyan transition">Cadres Réglementaires</a>
<a href="#future" class="hover:text-cyber-cyan transition">L'Avenir</a>
<a href="#contact" class="hover:text-cyber-cyan transition">Contact</a>
</div>
<button class="md:hidden text-cyber-cyan">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-pattern min-h-screen flex items-center pt-16">
<div class="max-w-7xl mx-auto px-6 py-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-block bg-cyber-blue bg-opacity-20 px-4 py-2 rounded-full mb-6">
<span class="text-cyber-cyan"><i class="fas fa-star mr-2"></i>Expertise Européenne</span>
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold font-heading mb-6 leading-tight">
<span class="block text-white">Sécurité Cybernétique</span>
<span class="block bg-gradient-to-r from-cyan-400 to-blue-500 text-transparent bg-clip-text glow">pour l'Ère Digitale</span>
</h1>
<p class="text-xl text-gray-300 mb-10 max-w-2xl">
Protégez votre organisation contre les cybermenaces émergentes et naviguez en toute confiance dans le paysage réglementaire complexe.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#contact" class="bg-cyber-cyan text-cyber-dark font-bold px-8 py-4 rounded-full hover:bg-cyan-400 transition duration-300 text-center">
<i class="fas fa-shield-alt mr-2"></i> Obtenir une Consultation
</a>
<a href="#threats" class="border-2 border-cyber-cyan text-cyber-cyan font-bold px-8 py-4 rounded-full hover:bg-cyber-cyan hover:bg-opacity-10 transition duration-300 text-center">
<i class="fas fa-bolt mr-2"></i> En savoir plus
</a>
</div>
</div>
<div class="relative flex justify-center mt-12 lg:mt-0">
<div class="absolute top-0 left-10 w-72 h-72 bg-cyber-cyan rounded-full mix-blend-soft-light filter blur-3xl opacity-20 animate-pulse"></div>
<div class="relative bg-cyber-dark bg-opacity-50 backdrop-blur rounded-2xl p-6 border border-cyber-cyan border-opacity-30 overflow-hidden">
<div class="grid-pattern absolute inset-0 pointer-events-none"></div>
<div class="relative z-10">
<h3 class="text-xl font-bold mb-4 text-cyber-cyan"><i class="fas fa-chart-line mr-2"></i>Cyber Resilience Dashboard</h3>
<div class="flex justify-between mb-3">
<div>
<div class="text-sm">Menaces détectées</div>
<div class="text-2xl font-bold text-red-400">128</div>
</div>
<div>
<div class="text-sm">Conformité</div>
<div class="text-2xl font-bold text-green-400">87%</div>
</div>
</div>
<div class="mt-6 h-48 flex items-end gap-2">
<div class="w-8 h-36 bg-gradient-to-t from-red-500 to-red-300 rounded-t-xl"></div>
<div class="w-8 h-24 bg-gradient-to-t from-yellow-500 to-yellow-300 rounded-t-xl"></div>
<div class="w-8 h-44 bg-gradient-to-t from-red-500 to-red-300 rounded-t-xl"></div>
<div class="w-8 h-32 bg-gradient-to-t from-cyan-500 to-cyan-300 rounded-t-xl"></div>
<div class="w-8 h-40 bg-gradient-to-t from-yellow-500 to-yellow-300 rounded-t-xl"></div>
<div class="w-8 h-28 bg-gradient-to-t from-cyan-500 to-cyan-300 rounded-t-xl"></div>
<div class="w-8 h-36 bg-gradient-to-t from-green-500 to-green-300 rounded-t-xl"></div>
</div>
<div class="mt-4 text-xs flex justify-between">
<span>Santé</span>
<span>Fintech</span>
<span>Satellites</span>
<span>IoT</span>
<span>Robotics</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Threats Section -->
<section id="threats" class="py-20 tech-bg">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-heading">
<span class="text-cyber-cyan"><i class="fas fa-bolt mr-3"></i>Menaces Cybernétiques Émergentes</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Un paysage numérique en constante évolution apporte de nouvelles vulnérabilités dans des domaines critiques
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Medical Imaging Threat -->
<div class="bg-cyber-dark bg-opacity-50 backdrop-blur rounded-2xl p-8 border border-gray-700 hover:border-cyber-cyan transition duration-300">
<div class="w-16 h-16 rounded-xl bg-cyan-900 flex items-center justify-center mb-6">
<i class="fas fa-medkit text-3xl text-cyan-400"></i>
</div>
<h3 class="text-xl font-bold mb-4">Imagerie Médicale</h3>
<p class="text-gray-300 mb-4">
Les dispositifs médicaux connectés représentent un risque croissant pour la sécurité des patients et la confidentialité des données.
</p>
<div class="mt-6">
<div class="flex justify-between text-sm mb-2">
<span>Augmentation des attaques:</span>
<span class="text-cyan-400 font-bold">+85%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-cyan-500 h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
<!-- Satellites Threat -->
<div class="bg-cyber-dark bg-opacity-50 backdrop-blur rounded-2xl p-8 border border-gray-700 hover:border-cyber-cyan transition duration-300">
<div class="w-16 h-16 rounded-xl bg-blue-900 flex items-center justify-center mb-6">
<i class="fas fa-satellite text-3xl text-blue-400"></i>
</div>
<h3 class="text-xl font-bold mb-4">Systèmes Satellitaires</h3>
<p class="text-gray-300 mb-4">
La dépendance croissante aux infrastructures spatiales expose les communications et la navigation à des risques cybernétiques.
</p>
<div class="mt-6">
<div class="flex justify-between text-sm mb-2">
<span>Infrastructures vulnérables:</span>
<span class="text-blue-400 font-bold">72%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div>
</div>
</div>
</div>
<!-- Robotics Threat -->
<div class="bg-cyber-dark bg-opacity-50 backdrop-blur rounded-2xl p-8 border border-gray-700 hover:border-cyber-cyan transition duration-300">
<div class="w-16 h-16 rounded-xl bg-purple-900 flex items-center justify-center mb-6">
<i class="fas fa-robot text-3xl text-purple-400"></i>
</div>
<h3 class="text-xl font-bold mb-4">Robotique Industrielle</h3>
<p class="text-gray-300 mb-4">
L'automatisation croissante crée de nouvelles surfaces d'attaque dans les environnements manufacturiers et logistiques.
</p>
<div class="mt-6">
<div class="flex justify-between text-sm mb-2">
<span>Usines touchées (2023):</span>
<span class="text-purple-400 font-bold">1 sur 4</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 67%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Regulatory Section -->
<section id="regulations" class="py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-heading">
<span class="text-white"><i class="fas fa-file-contract mr-3"></i>Cadres Réglementaires Clés</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Naviguez dans le paysage réglementaire complexe avec l'aide de nos experts
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- NIS2 -->
<div class="regulation-card p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="w-14 h-14 rounded-lg bg-blue-500 flex items-center justify-center text-white mr-4">
NIS2
</div>
<h3 class="text-2xl font-bold">Directive NIS2</h3>
</div>
<p class="text-gray-300 mb-6">
La nouvelle directive sur la sécurité des réseaux et des systèmes d'information élargit son champ d'application et renforce les exigences de sécurité.
</p>
<div class="mt-4">
<div class="flex items-center text-blue-400 mb-2">
<i class="fas fa-calendar mr-2"></i>
<span>Date d'application: Octobre 2024</span>
</div>
<div class="flex items-center text-blue-400">
<i class="fas fa-industry mr-2"></i>
<span>Secteurs concernés: Énergie, Santé, Transport, Digital</span>
</div>
</div>
</div>
<!-- DORA -->
<div class="regulation-card p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="w-14 h-14 rounded-lg bg-cyan-500 flex items-center justify-center text-white mr-4">
DORA
</div>
<h3 class="text-2xl font-bold">Règlement DORA</h3>
</div>
<p class="text-gray-300 mb-6">
Le règlement sur la résilience opérationnelle numérique pour le secteur financier établit des exigences uniformes en matière de sécurité des TIC.
</p>
<div class="mt-4">
<div class="flex items-center text-cyan-400 mb-2">
<i class="fas fa-calendar mr-2"></i>
<span>Date d'application: Janvier 2025</span>
</div>
<div class="flex items-center text-cyan-400">
<i class="fas fa-university mr-2"></i>
<span>Secteurs concernés: Banques, Assurances, Fintech</span>
</div>
</div>
</div>
<!-- CRA -->
<div class="regulation-card p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="w-14 h-14 rounded-lg bg-cyan-500 flex items-center justify-center text-white mr-4">
CRA
</div>
<h3 class="text-2xl font-bold">Cyber Resilience Act</h3>
</div>
<p class="text-gray-300 mb-6">
La première législation de l'UE exigeant des exigences en matière de cybersécurité pour les produits connectés tout au long de leur cycle de vie.
</p>
<div class="mt-4">
<div class="flex items-center text-cyan-400 mb-2">
<i class="fas fa-calendar mr-2"></i>
<span>Échéance: 2025-2027</span>
</div>
<div class="flex items-center text-cyan-400">
<i class="fas fa-microchip mr-2"></i>
<span>Produits visés: IoT, Systèmes embarqués, Logiciels</span>
</div>
</div>
</div>
</div>
<div class="mt-16 bg-gradient-to-r from-cyber-dark to-cyber-blue rounded-2xl p-8 border border-cyber-blue">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<h3 class="text-2xl font-bold mb-4">Notre Approche de Conformité</h3>
<p class="text-gray-300 mb-6">
Nous transformons les exigences réglementaires en avantage stratégique grâce à notre méthodologie exclusive CyberReg360°.
</p>
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-check-circle text-cyan-400 mr-3"></i>
<span>Cartographie des exigences spécifiques à votre secteur</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-cyan-400 mr-3"></i>
<span>Diagnostic de conformité complet</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-cyan-400 mr-3"></i>
<span>Plan de mise en conformité sur mesure</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-cyan-400 mr-3"></i>
<span>Suivi continu et mise à jour réglementaire</span>
</li>
</ul>
</div>
<div class="bg-cyber-dark bg-opacity-50 rounded-xl p-6">
<div class="flex items-center justify-between mb-6">
<h4 class="font-bold">Niveau de préparation DORA</h4>
<span class="text-cyan-400">32%</span>
</div>
<div class="w-full bg-gray-700 h-4 rounded-full mb-8">
<div class="bg-cyan-500 h-4 rounded-full" style="width: 32%"></div>
</div>
<div class="flex items-center justify-between mb-4">
<span>Secteur financier moyen</span>
<span>57%</span>
</div>
<div class="w-full bg-gray-700 h-3 rounded-full mb-8">
<div class="bg-blue-500 h-3 rounded-full" style="width: 57%"></div>
</div>
<div class="text-center mt-10">
<button class="bg-cyan-500 hover:bg-cyan-600 text-cyber-dark font-bold py-3 px-6 rounded-full transition duration-300">
Évaluer votre préparation
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Future Section -->
<section id="future" class="py-20 tech-bg">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-heading">
<span class="text-cyber-cyan"><i class="fas fa-crystal-ball mr-3"></i>Perspectives pour la Décennie</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Préparons votre organisation pour les défis de demain
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- AI Security -->
<div class="future-card rounded-2xl p-8">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-900 to-pink-700 flex items-center justify-center mr-5">
<i class="fas fa-brain text-3xl text-purple-400"></i>
</div>
<h3 class="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 text-transparent bg-clip-text">Sécurité IA</h3>
</div>
<p class="text-gray-300 mb-6">
Les systèmes d'intelligence artificielle introduisent de nouvelles vulnérabilités tout en offrant des solutions révolutionnaires pour la défense cyber.
</p>
<div class="space-y-4 mt-8">
<div class="flex">
<div class="flex-shrink-0">
<div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center">
<i class="fas fa-shield-alt text-purple-400"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Sécurité des Modèles</h4>
<p class="text-gray-400">Protection contre l'empoisonnement et l'extraction de modèles</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center">
<i class="fas fa-robot text-purple-400"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Adversarial Defense</h4>
<p class="text-gray-400">Détection des attaques par contournement</p>
</div>
</div>
</div>
<div class="mt-8 py-4 border-t border-gray-700">
<h4 class="font-bold mb-3">Horizon des risques IA:</h4>
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>2024</span>
<span>2030</span>
</div>
<div class="w-full h-3 bg-gray-800 rounded-full">
<div class="h-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full" style="width: 45%"></div>
</div>
</div>
</div>
<!-- Post-Quantum -->
<div class="future-card rounded-2xl p-8">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-xl bg-gradient-to-br from-cyan-900 to-blue-700 flex items-center justify-center mr-5">
<i class="fas fa-atom text-3xl text-cyan-400"></i>
</div>
<h3 class="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-400 text-transparent bg-clip-text">Cryptographie Post-Quantique</h3>
</div>
<p class="text-gray-300 mb-6">
L'avènement de l'informatique quantique rendra obsolètes les algorithmes cryptographiques actuels. La transition doit commencer maintenant.
</p>
<div class="space-y-4 mt-8">
<div class="flex">
<div class="flex-shrink-0">
<div class="w-10 h-10 rounded-full bg-cyan-900 flex items-center justify-center">
<i class="fas fa-key text-cyan-400"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Inventaire Crypto</h4>
<p class="text-gray-400">Identification des systèmes vulnérables</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="w-10 h-10 rounded-full bg-cyan-900 flex items-center justify-center">
<i class="fas fa-lock text-cyan-400"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Roadmap PQ</h4>
<p class="text-gray-400">Feuille de route de migration vers des algorithmes quantiques-résistants</p>
</div>
</div>
</div>
<div class="mt-8 py-4 border-t border-gray-700">
<h4 class="font-bold mb-3">Échéance quantique:</h4>
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Aujourd'hui</span>
<span>2028-2033</span>
</div>
<div class="w-full h-3 bg-gray-800 rounded-full">
<div class="h-3 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style="width: 70%"></div>
</div>
</div>
</div>
</div>
<div class="mt-20 text-center">
<h3 class="text-2xl md:text-3xl font-bold font-heading mb-6">Rejoignez notre Programme FutureShield</h3>
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
Une veille technologique et stratégique exclusive pour les organisations visionnaires
</p>
<button class="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105">
<i class="fas fa-gem mr-3"></i> Programme FutureShield
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-heading">
<span class="text-cyber-cyan"><i class="fas fa-comments mr-3"></i>Contactez nos Experts</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Discutons de vos défis en cybersécurité et de la meilleure façon de protéger votre organisation
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="bg-cyber-dark bg-opacity-50 backdrop-blur rounded-2xl p-8 border border-gray-700">
<h3 class="text-2xl font-bold mb-6">Prenez rendez-vous</h3>
<form class="space-y-6">
<div>
<label class="block text-gray-400 mb-2">Nom Complet</label>
<input type="text" class="w-full bg-cyber-dark border border-gray-700 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500">
</div>
<div>
<label class="block text-gray-400 mb-2">Email Professionnel</label>
<input type="email" class="w-full bg-cyber-dark border border-gray-700 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500">
</div>
<div>
<label class="block text-gray-400 mb-2">Organisation</label>
<input type="text" class="w-full bg-cyber-dark border border-gray-700 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500">
</div>
<div>
<label class="block text-gray-400 mb-2">Secteur d'activité</label>
<select class="w-full bg-cyber-dark border border-gray-700 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500">
<option>Sélectionnez...</option>
<option>Santé</option>
<option>Industrie</option>
<option>Finance</option>
<option>Technologie</option>
<option>Énergie</option>
<option>Transport</option>
<option>Autre</option>
</select>
</div>
<div>
<label class="block text-gray-400 mb-2">Votre message</label>
<textarea rows="4" class="w-full bg-cyber-dark border border-gray-700 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500"></textarea>
</div>
<button type="submit" class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-4 px-6 rounded-lg transition duration-300">
<i class="fas fa-paper-plane mr-2"></i> Envoyer la demande
</button>
</form>
</div>
<div>
<div class="bg-gradient-to-br from-cyber-dark to-cyber-blue rounded-2xl p-8 h-full">
<h3 class="text-2xl font-bold mb-6 text-white">Nous trouver</h3>
<div class="space-y-8">
<div class="flex">
<div class="flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-cyan-500 flex items-center justify-center">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Bureaux Européens</h4>
<p class="text-gray-300">Paris · Bruxelles · Berlin · Luxembourg</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
<i class="fas fa-phone"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Contact</h4>
<p class="text-gray-300">+33 1 23 45 67 89</p>
<p class="text-gray-300">contact@cybershield-conseils.eu</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-cyan-500 flex items-center justify-center">
<i class="fas fa-users"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg font-bold text-white">Événements</h4>
<p class="text-gray-300">Prochain webinar: 25 Octobre 2023</p>
<p class="text-cyan-400 mt-2"><i class="fas fa-calendar mr-2"></i>S'inscrire au Cyber Summit</p>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-700">
<h4 class="text-lg font-bold mb-4">Nos Partenaires</h4>
<div class="flex flex-wrap gap-4">
<div class="w-16 h-16 rounded-lg bg-gray-200 bg-opacity-10 flex items-center justify-center text-blue-300 text-2xl">
ENISA
</div>
<div class="w-16 h-16 rounded-lg bg-gray-200 bg-opacity-10 flex items-center justify-center text-blue-300 text-2xl">
ANSSI
</div>
<div class="w-16 h-16 rounded-lg bg-gray-200 bg-opacity-10 flex items-center justify-center text-blue-300 text-2xl">
CSA
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-cyber-dark border-t border-cyber-blue pt-12 pb-8">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center mb-6">
<div class="w-10 h-10 rounded-full bg-cyber-cyan mr-3 flex items-center justify-center">
<i class="fas fa-shield-alt text-cyber-dark text-xl"></i>
</div>
<span class="text-xl font-bold font-heading text-cyber-cyan">CyberShield<span class="text-white">Conseils</span></span>
</div>
<p class="text-gray-400">
Cabinet européen d'expertise en cybersécurité protégeant les organisations depuis 2015.
</p>
<div class="flex space-x-4 mt-6">
<a href="#" class="text-gray-400 hover:text-cyan-400">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-400">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-cyan-400">
<i class="fab fa-github text-xl"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6 text-white">Services</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Audit de sécurité</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Conformité réglementaire</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Gestion des incidents</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Formation cybersécurité</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Pentest avancé</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6 text-white">Ressources</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Rapports de menaces</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Webinaires</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Ouvrages blancs</a></li>
<li><a href="#" class="text-gray-400 hover:text-cyan-400">Outils gratuits</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6 text-white">Newsletter</h4>
<p class="text-gray-400 mb-4">
Restez informé des dernières menaces et tendances en cybersécurité.
</p>
<div class="flex">
<input type="email" placeholder="Votre email" class="bg-cyber-gray text-white rounded-l-lg p-3 w-full focus:outline-none">
<button class="bg-cyan-500 hover:bg-cyan-600 text-white p-3 rounded-r-lg">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="pt-8 mt-8 border-t border-gray-800 text-center text-gray-500">
<p>&copy; 2023 CyberShield Conseils. Tous droits réservés. Conformité RGPD et normes ISO 27001</p>
<div class="mt-2 text-sm">
<a href="#" class="hover:text-cyan-400 mr-4">Politique de confidentialité</a>
<a href="#" class="hover:text-cyan-400 mr-4">Conditions d'utilisation</a>
<a href="#" class="hover:text-cyan-400">Politique des cookies</a>
</div>
</div>
</div>
</footer>
<script>
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle
const mobileMenuBtn = document.querySelector('button[aria-label="Menu"]');
const mobileMenu = document.querySelector('#mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maheri/csc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>