|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta name="description" content="Deepsite - Experts en cybersécurité pour l'imagerie médicale. Conformité ISO 27001, sécurisation DICOM, audits réseau."> |
|
|
<title>Deepsite - Cybersécurité pour l'Imagerie Médicale</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#0d47a1', |
|
|
secondary: '#1976d2', |
|
|
accent: '#e3f2fd', |
|
|
cobalt: '#0d47a1' |
|
|
}, |
|
|
fontFamily: { |
|
|
inter: ['Inter', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.hero-bg { |
|
|
background: radial-gradient(circle, rgba(13, 71, 161, 0.85), rgba(13, 71, 161, 0.95)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231976d2"/><circle cx="50" cy="50" r="40" fill="none" stroke="%230d47a1" stroke-width="3" stroke-dasharray="5,5"/><circle cx="25" cy="25" r="10" fill="%23e3f2fd" opacity="0.5"/><circle cx="75" cy="75" r="8" fill="%23e3f2fd" opacity="0.5"/></svg>'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(13, 71, 161, 0.2); |
|
|
} |
|
|
|
|
|
.ripple { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
transform: scale(0); |
|
|
animation: ripple 0.6s linear; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes ripple { |
|
|
to { |
|
|
transform: scale(4); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.pacs-mockup { |
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231976d2" opacity="0.1"/></svg>'); |
|
|
background-size: cover; |
|
|
border-left: 4px solid #1976d2; |
|
|
} |
|
|
|
|
|
.contact-step { |
|
|
display: none; |
|
|
animation: fadeIn 0.5s forwards; |
|
|
} |
|
|
|
|
|
.contact-step.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.stat-badge { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(25, 118, 210, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-accent"> |
|
|
|
|
|
<nav class="bg-white shadow-sm fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-shield-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<span class="ml-2 font-bold text-2xl text-primary">DEEPSITE</span> |
|
|
</div> |
|
|
<div class="hidden md:block ml-10"> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#expertise" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">Expertises</a> |
|
|
<a href="#cas" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">Cas d'étude</a> |
|
|
<a href="#faq" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">FAQ</a> |
|
|
<a href="#contact" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center"> |
|
|
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Connexion client</button> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="mobile-menu-button" class="text-primary"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="mobile-menu" class="md:hidden hidden bg-white py-2"> |
|
|
<a href="#expertise" class="block px-4 py-2 hover:bg-accent">Expertises</a> |
|
|
<a href="#cas" class="block px-4 py-2 hover:bg-accent">Cas d'étude</a> |
|
|
<a href="#faq" class="block px-4 py-2 hover:bg-accent">FAQ</a> |
|
|
<a href="#contact" class="block px-4 py-2 hover:bg-accent">Contact</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-bg min-h-screen flex items-center pt-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:grid md:grid-cols-2 md:gap-12 items-center"> |
|
|
<div class="text-white py-16 md:py-0"> |
|
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight"> |
|
|
Protégez vos données d'imagerie médicale. |
|
|
</h1> |
|
|
<p class="mt-6 text-xl opacity-90 max-w-lg"> |
|
|
Conformité ISO 27001 garantie et maîtrise complète des flux DICOM dans votre infrastructure de santé. |
|
|
</p> |
|
|
<div class="mt-10"> |
|
|
<button id="auditBtn" class="btn-primary bg-white text-primary font-bold py-3 px-8 rounded-xl text-lg relative overflow-hidden"> |
|
|
Demander un audit gratuit |
|
|
<span class="absolute inset-0 opacity-30 ripple-effect"></span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block relative"> |
|
|
<div class="bg-white rounded-2xl p-1 shadow-xl floating"> |
|
|
<div class="bg-accent rounded-xl p-6"> |
|
|
<div class="flex space-x-3 items-center mb-6"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-4"> |
|
|
<div class="bg-white rounded-lg p-4 shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-primary mr-2"></div> |
|
|
<span class="text-sm text-gray-700">DICOM</span> |
|
|
</div> |
|
|
<div class="mt-2 h-2 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg p-4 shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-secondary mr-2"></div> |
|
|
<span class="text-sm text-gray-700">PACS</span> |
|
|
</div> |
|
|
<div class="mt-2 h-2 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg p-4 shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-sm text-gray-700">HL7</span> |
|
|
</div> |
|
|
<div class="mt-2 h-2 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 bg-gradient-to-r from-primary to-secondary rounded-lg p-6 text-white"> |
|
|
<div class="text-lg font-bold">Statut Sécurité</div> |
|
|
<div class="mt-2 flex items-center"> |
|
|
<div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-semibold">Système conforme ISO 27001</div> |
|
|
<div class="text-xs opacity-80">Dernière vérification: 15/09/2023</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-10 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="flex space-x-6 md:space-x-12 items-center"> |
|
|
<div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center"> |
|
|
<i class="fas fa-certificate text-primary text-2xl"></i> |
|
|
</div> |
|
|
<div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center"> |
|
|
<i class="fas fa-user-shield text-primary text-2xl"></i> |
|
|
</div> |
|
|
<div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center"> |
|
|
<i class="fas fa-lock text-primary text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 md:mt-0 text-center md:text-right"> |
|
|
<p class="text-lg text-primary max-w-md"> |
|
|
"Réduction mesurable des risques et renforcement de la conformité réglementaire." |
|
|
</p> |
|
|
<div class="flex space-x-4 mt-4 justify-center md:justify-end"> |
|
|
<span class="text-xs bg-accent px-3 py-1 rounded-full text-primary">ISO/IEC 27001</span> |
|
|
<span class="text-xs bg-accent px-3 py-1 rounded-full text-primary">HIPAA</span> |
|
|
<span class="text-xs bg-accent px-3 py-1 rounded-full text-primary">GDPR</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="expertise" class="py-20 bg-accent"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary">Nos Expertises</h2> |
|
|
<p class="mt-4 text-gray-700 max-w-2xl mx-auto"> |
|
|
Des solutions complètes pour protéger vos infrastructures d'imagerie médicale |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="card-hover bg-white rounded-2xl p-8 shadow-lg flex flex-col"> |
|
|
<div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-shield-alt text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Audits ISO/IEC 27001</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Mise en place et maintien d'un SMSI complet pour les services de radiologie et de diagnostic. |
|
|
</p> |
|
|
<ul class="mt-auto space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Évaluation des risques selon ISO 27005</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Plan d'action personnalisé</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Formation du personnel</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover bg-white rounded-2xl p-8 shadow-lg flex flex-col"> |
|
|
<div class="bg-secondary rounded-full w-16 h-16 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-network-wired text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Analyse réseau Wireshark</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Détection d'intrusions, forensic et tuning SOC pour les infrastructures médicales critiques. |
|
|
</p> |
|
|
<ul class="mt-auto space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Analyse des flux DICOM et HL7</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Détection de trafic malveillant</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Optimisation des règles firewall</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover bg-white rounded-2xl p-8 shadow-lg flex flex-col"> |
|
|
<div class="bg-green-500 rounded-full w-16 h-16 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-x-ray text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Sécurisation DICOM</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Chiffrement, contrôle d'accès et durcissement des serveurs PACS et stations de travail. |
|
|
</p> |
|
|
<ul class="mt-auto space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Conformité ANSSI-RGS</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Architecture Zero Trust</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2"></i> |
|
|
<span>Journalisation et traçabilité</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="cas" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div class="flex items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">Transformation Cybersécurité d'un Service de Radiologie</h2> |
|
|
<div class="bg-accent p-6 rounded-xl mb-6"> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="stat-badge bg-secondary text-white py-3 px-6 rounded-lg flex flex-col items-center justify-center"> |
|
|
<span class="text-2xl font-bold">-60%</span> |
|
|
<span class="text-xs">d'alertes</span> |
|
|
</div> |
|
|
<div class="stat-badge bg-green-500 text-white py-3 px-6 rounded-lg flex flex-col items-center justify-center"> |
|
|
<span class="text-2xl font-bold">0</span> |
|
|
<span class="text-xs">fuites DICOM</span> |
|
|
</div> |
|
|
<div class="stat-badge bg-primary text-white py-3 px-6 rounded-lg flex flex-col items-center justify-center"> |
|
|
<span class="text-2xl font-bold">95%</span> |
|
|
<span class="text-xs">conformité</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-6 text-gray-700"> |
|
|
Après un audit approfondi, nous avons accompagné un CHU dans la sécurisation de son infrastructure PACS, obtenant des résultats significatifs en 12 mois. |
|
|
</p> |
|
|
</div> |
|
|
<button class="btn-primary bg-primary text-white font-bold py-3 px-8 rounded-xl flex items-center"> |
|
|
<i class="fas fa-download mr-3"></i> |
|
|
Lire le rapport PDF |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pacs-mockup bg-gray-50 rounded-2xl p-8 min-h-80 flex items-center justify-center"> |
|
|
<div class="max-w-md"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between"> |
|
|
<div class="text-sm text-gray-500">Avant</div> |
|
|
<div class="flex"> |
|
|
<span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-gray-300 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-gray-300"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-4 bg-gradient-to-r from-red-400 to-red-200 rounded-full"></div> |
|
|
|
|
|
<div class="flex justify-between mt-8"> |
|
|
<div class="text-sm text-gray-500">Après</div> |
|
|
<div class="flex"> |
|
|
<span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-green-500"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-4 bg-gradient-to-r from-green-400 to-green-200 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-20 bg-accent"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary">Questions fréquentes</h2> |
|
|
<p class="mt-4 text-gray-700 max-w-2xl mx-auto"> |
|
|
Découvrez nos ressources pour comprendre les enjeux de cybersécurité en milieu médical |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 text-primary p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-question-circle text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">Pourquoi la norme ISO 27001 ?</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Le référentiel ISO 27001 est le cadre international incontournable pour maîtriser les risques de sécurité de l'information... |
|
|
</p> |
|
|
<button class="text-primary font-medium flex items-center"> |
|
|
En savoir plus |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 text-green-600 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-wrench text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">Comment tester un PACS ?</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Nos méthodologies de pentest spécifiques aux systèmes d'imagerie médicale combinent analyse réseau... |
|
|
</p> |
|
|
<button class="text-primary font-medium flex items-center"> |
|
|
En savoir plus |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 text-purple-600 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-wave-square text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold">Wireshark pour les biosignaux</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Analyser les flux de données biomédicales nécessite une compréhension approfondie des protocoles DICOM... |
|
|
</p> |
|
|
<button class="text-primary font-medium flex items-center"> |
|
|
En savoir plus |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="btn-primary border-2 border-primary text-primary font-bold py-3 px-8 rounded-xl"> |
|
|
Accéder au blog complet |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary">Audit Cybersécurité Gratuit</h2> |
|
|
<p class="mt-4 text-gray-700 max-w-xl mx-auto"> |
|
|
Demandez votre évaluation préliminaire et recevez des recommandations personnalisées |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden"> |
|
|
<div class="px-6 py-8 sm:p-10"> |
|
|
|
|
|
<div id="step1" class="contact-step active"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-6">Informations principales</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Nom complet</label> |
|
|
<input type="text" id="name" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="company" class="block text-sm font-medium text-gray-700">Établissement</label> |
|
|
<input type="text" id="company" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
|
|
<input type="email" id="email" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Téléphone</label> |
|
|
<input type="tel" id="phone" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 flex justify-end"> |
|
|
<button id="nextToStep2" class="btn-primary bg-primary text-white font-medium py-2 px-6 rounded-md"> |
|
|
Suivant |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step2" class="contact-step"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-6">Besoins spécifiques</h3> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700">Vos besoins principaux</label> |
|
|
<textarea id="message" rows="4" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border"></textarea> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="rgpd" name="rgpd" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> |
|
|
<label for="rgpd" class="ml-2 block text-sm text-gray-700"> |
|
|
J'accepte la politique de confidentialité et le traitement de mes données dans le cadre de cette demande. |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 flex justify-between"> |
|
|
<button id="backToStep1" class="font-medium py-2 px-6 rounded-md border border-gray-300"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Retour |
|
|
</button> |
|
|
<button id="submitForm" class="btn-primary bg-primary text-white font-medium py-2 px-6 rounded-md"> |
|
|
Envoyer la demande |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="thankYouMessage" class="contact-step hidden"> |
|
|
<div class="text-center py-12"> |
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100"> |
|
|
<i class="fas fa-check-circle text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-2xl font-bold text-gray-900">Demande envoyée avec succès !</h3> |
|
|
<p class="mt-4 text-gray-700"> |
|
|
Nous avons bien reçu votre demande d'audit gratuit. Un expert Deepsite vous contactera dans les 48 heures pour planifier votre évaluation. |
|
|
</p> |
|
|
<button id="newRequest" class="mt-6 btn-primary bg-primary text-white font-medium py-2 px-6 rounded-md"> |
|
|
Nouvelle demande |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-primary text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-white bg-opacity-20 w-10 h-10 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<span class="ml-2 font-bold text-xl">DEEPSITE</span> |
|
|
</div> |
|
|
<p class="mt-4 text-accent max-w-xs"> |
|
|
Experts en cybersécurité dédiés à la protection des infrastructures de santé et d'imagerie médicale. |
|
|
</p> |
|
|
<div class="mt-6 bg-secondary rounded-lg py-2 px-4 inline-block"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-certificate mr-2"></i> |
|
|
<span>Certifié ISO 27001:2022</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#expertise" class="text-accent hover:text-white">Expertises</a></li> |
|
|
<li><a href="#cas" class="text-accent hover:text-white">Études de cas</a></li> |
|
|
<li><a href="#faq" class="text-accent hover:text-white">FAQ</a></li> |
|
|
<li><a href="#contact" class="text-accent hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact</h3> |
|
|
<ul class="space-y-3 text-accent"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3"></i> |
|
|
<span>12 Rue de la Radiologie<br>75015 Paris</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-3"></i> |
|
|
<span>+33 1 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-3"></i> |
|
|
<span>[email protected]</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Réseaux sociaux</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-op-30"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button class="bg-accent text-primary font-medium py-2 px-4 rounded-lg"> |
|
|
Espace client |
|
|
<i class="fas fa-lock ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-white border-opacity-20 mt-12 pt-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-accent">© 2023 Deepsite. Tous droits réservés.</p> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<a href="#" class="text-accent hover:text-white mr-6">Politique de confidentialité</a> |
|
|
<a href="#" class="text-accent hover:text-white">Mentions légales</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
function createRipple(event) { |
|
|
const button = event.currentTarget; |
|
|
const circle = document.createElement('span'); |
|
|
const diameter = Math.max(button.clientWidth, button.clientHeight); |
|
|
const radius = diameter / 2; |
|
|
|
|
|
circle.style.width = circle.style.height = `${diameter}px`; |
|
|
circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`; |
|
|
circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`; |
|
|
circle.classList.add('ripple'); |
|
|
|
|
|
const ripple = button.getElementsByClassName('ripple')[0]; |
|
|
if (ripple) { |
|
|
ripple.remove(); |
|
|
} |
|
|
|
|
|
button.appendChild(circle); |
|
|
} |
|
|
|
|
|
const buttons = document.querySelectorAll('.btn-primary'); |
|
|
buttons.forEach(button => { |
|
|
button.addEventListener('click', createRipple); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('auditBtn').addEventListener('click', function() { |
|
|
document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('nextToStep2').addEventListener('click', function() { |
|
|
document.getElementById('step1').classList.remove('active'); |
|
|
document.getElementById('step2').classList.add('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('backToStep1').addEventListener('click', function() { |
|
|
document.getElementById('step2').classList.remove('active'); |
|
|
document.getElementById('step1').classList.add('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('submitForm').addEventListener('click', function() { |
|
|
document.getElementById('step2').classList.remove('active'); |
|
|
document.getElementById('thankYouMessage').classList.add('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('newRequest').addEventListener('click', function() { |
|
|
document.getElementById('thankYouMessage').classList.remove('active'); |
|
|
document.getElementById('step1').classList.add('active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('input, textarea').forEach(input => { |
|
|
input.value = ''; |
|
|
}); |
|
|
document.getElementById('rgpd').checked = false; |
|
|
}); |
|
|
</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/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
