|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SécurityMed | Expertise en Cybersécurité Médicale</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script type="application/ld+json"> |
|
|
{ |
|
|
"@context": "https://schema.org", |
|
|
"@type": "MedicalOrganization", |
|
|
"name": "SécurityMed", |
|
|
"url": "https://www.securitymed.fr", |
|
|
"logo": "https://securitymed.fr/logo.png", |
|
|
"description": "Expert en cybersécurité pour infrastructures d'imagerie médicale, protection des flux DICOM et conformité LI 27001", |
|
|
"medicalSpecialty": "Cyberprotection médicale", |
|
|
"areaServed": "France" |
|
|
} |
|
|
</script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'medical-blue': '#0d3b66', |
|
|
'security-green': '#38b000', |
|
|
'light-blue': '#f0f7ff', |
|
|
}, |
|
|
fontFamily: { |
|
|
'heading': ['Montserrat', 'sans-serif'], |
|
|
'body': ['Open Sans', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'body', sans-serif; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'heading', sans-serif; |
|
|
} |
|
|
|
|
|
.navbar-fixed { |
|
|
@apply fixed z-50 bg-white bg-opacity-90 backdrop-blur; |
|
|
box-shadow: 0 2px 20px rgba(13, 59, 102, 0.1); |
|
|
} |
|
|
|
|
|
.process-step { |
|
|
position: relative; |
|
|
min-height: 120px; |
|
|
padding-top: 60px; |
|
|
padding-left: 25px; |
|
|
} |
|
|
|
|
|
.process-step:before { |
|
|
content: ''; |
|
|
@apply absolute top-0 left-0 w-16 h-16 rounded-full flex items-center justify-center bg-security-green text-white font-bold; |
|
|
font-family: 'heading'; |
|
|
font-size: 1.5rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.process-step:nth-child(1):before { content: '1'; } |
|
|
.process-step:nth-child(2):before { content: '2'; } |
|
|
.process-step:nth-child(3):before { content: '3'; } |
|
|
.process-step:nth-child(4):before { content: '4'; } |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.security-icon { |
|
|
@apply w-16 h-16 flex items-center justify-center rounded-full mb-4; |
|
|
background-color: rgba(56, 176, 0, 0.1); |
|
|
} |
|
|
|
|
|
.hero-pattern { |
|
|
background: |
|
|
radial-gradient(circle at 10% 50%, rgba(13, 59, 102, 0.05) 0%, transparent 20%), |
|
|
radial-gradient(circle at 90% 30%, rgba(56, 176, 0, 0.05) 0%, transparent 15%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header class="w-full py-4 transition-all duration-300" id="navbar"> |
|
|
<div class="container mx-auto px-4 flex justify-between items-center"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-medical-blue rounded-full mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-shield-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<span class="text-medical-blue text-xl font-bold">Sécurity<span class="text-security-green">Med</span></span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="hidden md:flex items-center space-x-10"> |
|
|
<a href="#solutions" class="text-medical-blue font-medium hover:text-security-green transition">Solutions</a> |
|
|
<a href="#expertise" class="text-medical-blue font-medium hover:text-security-green transition">Expertise</a> |
|
|
<a href="#norms" class="text-medical-blue font-medium hover:text-security-green transition">Normes</a> |
|
|
<a href="#contact" class="text-medical-blue font-medium hover:text-security-green transition">Contact</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<button class="hidden md:block bg-security-green hover:bg-medical-blue text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:-translate-y-1"> |
|
|
Audit de sécurité gratuit |
|
|
</button> |
|
|
|
|
|
|
|
|
<button id="mobileMenuBtn" class="md:hidden text-medical-blue"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobileMenu" class="hidden bg-white py-4 px-4 absolute w-full left-0 top-20 z-50 shadow-lg"> |
|
|
<nav class="flex flex-col space-y-4"> |
|
|
<a href="#solutions" class="text-medical-blue font-medium hover:text-security-green transition">Solutions</a> |
|
|
<a href="#expertise" class="text-medical-blue font-medium hover:text-security-green transition">Expertise</a> |
|
|
<a href="#norms" class="text-medical-blue font-medium hover:text-security-green transition">Normes</a> |
|
|
<a href="#contact" class="text-medical-blue font-medium hover:text-security-green transition">Contact</a> |
|
|
<button class="bg-security-green hover:bg-medical-blue text-white font-bold py-3 px-4 rounded-full transition w-full"> |
|
|
Audit de sécurité gratuit |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-pattern bg-light-blue py-16 md:py-24 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-3xl md:text-5xl font-bold text-medical-blue leading-tight mb-6"> |
|
|
<span class="relative z-10">Sécurisez vos images médicales contre les cybermenaces</span> |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed"> |
|
|
Solutions conformes LI 27001 pour flux DICOM et réseaux hospitaliers - Protégez vos données patients et votre infrastructure médicale. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<button class="bg-security-green hover:bg-medical-blue text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 flex items-center"> |
|
|
Diagnostic gratuit |
|
|
<i class="fas fa-arrow-right ml-3"></i> |
|
|
</button> |
|
|
<button class="bg-medical-blue hover:bg-blue-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300"> |
|
|
Nos certifications |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 flex justify-center relative"> |
|
|
<div class="relative w-full max-w-xl"> |
|
|
<div class="relative p-8 rounded-3xl overflow-hidden" style="background: linear-gradient(145deg, #0d3b66, #092848);"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="security-icon"> |
|
|
<i class="fas fa-shield-alt text-security-green text-3xl"></i> |
|
|
</div> |
|
|
<div class="security-icon ml-6"> |
|
|
<i class="fas fa-heartbeat text-security-green text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6 text-center"> |
|
|
<h3 class="text-xl font-bold text-white mb-2">Protection réseau DICOM</h3> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-yellow-500 text-xs px-2 py-1 rounded-full mr-2">Port 104</div> |
|
|
<div class="bg-green-500 text-xs px-2 py-1 rounded-full">SSL/TLS</div> |
|
|
</div> |
|
|
<div class="bg-blue-900 rounded-lg p-4 border border-blue-700 mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-sm text-blue-200">CT Scanner HL7 → DICOM Secured</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-blue-900 rounded-lg p-4 border border-blue-700 mb-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-sm text-blue-200">Serveur PACS ↔ Station radiologique</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="inline-flex items-center text-white bg-medical-blue rounded-full px-4 py-2"> |
|
|
<i class="fas fa-certificate text-security-green mr-2"></i> |
|
|
<span>LI 27001 Certified</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-security-green rounded-full opacity-20"></div> |
|
|
<div class="absolute -top-6 -left-6 w-24 h-24 bg-medical-blue rounded-full opacity-10"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="expertise" class="py-16 md:py-24 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center max-w-3xl mx-auto mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Notre expertise unique</h2> |
|
|
<p class="text-gray-600 text-lg">Spécialisés dans la sécurisation des infrastructures médicales et des flux DICOM</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"> |
|
|
|
|
|
<div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="security-icon"> |
|
|
<i class="fas fa-shield-alt text-security-green text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-medical-blue my-4">Protection DICOM</h3> |
|
|
<p class="text-gray-600"> |
|
|
Chiffrement des flux d'images, contrôle d'accès HL7 sécurisé, authentification multifacteur pour vos systèmes PACs/RIS. |
|
|
</p> |
|
|
<div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium"> |
|
|
En savoir plus |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="security-icon"> |
|
|
<i class="fas fa-network-wired text-security-green text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-medical-blue my-4">Analyse réseau médical</h3> |
|
|
<p class="text-gray-600"> |
|
|
Surveillance Wireshark spécialisée équipements médicaux, détection des anomalies dans les flux DICOM, cartographie sécurisée. |
|
|
</p> |
|
|
<div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium"> |
|
|
En savoir plus |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="security-icon"> |
|
|
<i class="fas fa-certificate text-security-green text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-medical-blue my-4">Conformité normative</h3> |
|
|
<p class="text-gray-600"> |
|
|
Certification LI 27001 & adaptation RGPD santé, préparation aux audits ANSSI, solutions HDS pour la santé. |
|
|
</p> |
|
|
<div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium"> |
|
|
En savoir plus |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="norms" class="py-16 md:py-24 bg-medical-blue text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-8">Conformité aux normes de sécurité médicale</h2> |
|
|
<p class="text-lg text-blue-100 mb-10"> |
|
|
Nous garantissons le respect des réglementations les plus strictes pour la protection de vos données de santé. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
|
|
<span class="text-medical-blue font-bold">LI 27001</span> |
|
|
</div> |
|
|
<h3 class="font-bold">Label Informatique</h3> |
|
|
<p class="text-blue-100 text-sm mt-2">Cybersécurité des SI de santé</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
|
|
<span class="text-medical-blue font-bold">DICOM</span> |
|
|
</div> |
|
|
<h3 class="font-bold">DICOM Secured</h3> |
|
|
<p class="text-blue-100 text-sm mt-2">Sécurité des flux d'imagerie</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
|
|
<span class="text-medical-blue font-bold">HIPAA</span> |
|
|
</div> |
|
|
<h3 class="font-bold">Health Insurance</h3> |
|
|
<p class="text-blue-100 text-sm mt-2">Protection données patients</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
|
|
<span class="text-medical-blue font-bold">HDS</span> |
|
|
</div> |
|
|
<h3 class="font-bold">Hébergeur de Santé</h3> |
|
|
<p class="text-blue-100 text-sm mt-2">Certification de conformité</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-8">Notre processus d'accompagnement</h3> |
|
|
<div class="space-y-8"> |
|
|
<div class="process-step"> |
|
|
<h4 class="font-bold text-lg mb-2">Audit sécurité approfondi</h4> |
|
|
<p class="text-blue-100">Analyse complète de votre infrastructure et des flux DICOM</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<h4 class="font-bold text-lg mb-2">Hardening des systèmes</h4> |
|
|
<p class="text-blue-100">Renforcement de la sécurité serveurs et équipements</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<h4 class="font-bold text-lg mb-2">Formation spécifique</h4> |
|
|
<p class="text-blue-100">Personnalisée pour vos équipes médicales et techniques</p> |
|
|
</div> |
|
|
|
|
|
<div class="process-step"> |
|
|
<h4 class="font-bold text-lg mb-2">Surveillance continue</h4> |
|
|
<p class="text-blue-100">Monitoring et réponse aux incidents 24/7</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<button class="bg-security-green hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full shadow-lg flex items-center"> |
|
|
Télécharger notre livre blanc |
|
|
<i class="fas fa-download ml-3"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center max-w-3xl mx-auto mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Ils nous font confiance</h2> |
|
|
<p class="text-gray-600 text-lg">Hôpitaux, cliniques et fabricants nous font confiance pour sécuriser leur infrastructure médicale</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-light-blue rounded-2xl p-8 md:p-12 mb-16 relative"> |
|
|
<div class="absolute top-0 left-0 text-medical-blue opacity-10" style="font-size: 120px; transform: translate(-20%, -40%)"> |
|
|
<i class="fas fa-quote-left"></i> |
|
|
</div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg text-medical-blue">Dr. Martin Dubois</h4> |
|
|
<p class="text-blue-700">Responsable SI, CHU de Bordeaux</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-lg italic text-gray-700"> |
|
|
"Grâce à SécurityMed, notre système PACS a obtenu la certification LI 27001 en seulement 3 mois. Leur expertise spécifique aux réseaux d'imagerie médicale a été déterminante pour répondre aux exigences les plus strictes tout en maintenant notre continuité de service." |
|
|
</p> |
|
|
<div class="flex mt-6"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center"> |
|
|
<div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
|
|
<span class="text-medical-blue font-bold text-lg">CHU Paris</span> |
|
|
</div> |
|
|
<div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
|
|
<span class="text-medical-blue font-bold text-lg">Clinique Lyon</span> |
|
|
</div> |
|
|
<div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
|
|
<span class="text-medical-blue font-bold text-lg">Imagerie Sud</span> |
|
|
</div> |
|
|
<div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
|
|
<span class="text-medical-blue font-bold text-lg">ScanMed</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 md:py-24 bg-light-blue"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Contactez nos experts</h2> |
|
|
<p class="text-gray-700 mb-8"> |
|
|
Nos spécialistes en sécurité des réseaux médicaux sont à votre disposition pour évaluer vos besoins et protéger votre infrastructure. |
|
|
</p> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm mb-8"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="text-security-green text-xl mr-4"> |
|
|
<i class="fas fa-history"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-medical-blue">Spécialistes depuis 2015</h4> |
|
|
<p class="text-gray-600">Plus de 8 ans d'expertise dédiée à la cybersécurité médicale</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 bg-medical-blue rounded-full flex items-center justify-center text-white mr-4"> |
|
|
<i class="fas fa-hands-helping"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-medical-blue">Rappel sous 24h</h4> |
|
|
<p class="text-gray-600">Nous vous contactons rapidement après votre demande</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 bg-medical-blue rounded-full flex items-center justify-center text-white mr-4"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-medical-blue">Approche sectorielle</h4> |
|
|
<p class="text-gray-600">Des solutions adaptées à vos contraintes médicales</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<form id="contactForm"> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-medical-blue font-medium mb-2">Nom</label> |
|
|
<input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-medical-blue font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-medical-blue font-medium mb-2">Votre message</label> |
|
|
<textarea id="message" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-security-green hover:bg-medical-blue text-white font-bold py-4 px-6 rounded-full shadow-md transition-all duration-300 transform hover:-translate-y-1"> |
|
|
Sécuriser mon infrastructure |
|
|
</button> |
|
|
</form> |
|
|
<div id="formSuccess" class="hidden mt-4 p-4 bg-green-100 text-green-700 rounded-lg"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
Votre message a été envoyé ! Nous vous contacterons dans les plus brefs délais. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-medical-blue text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-shield-alt mr-3"></i> |
|
|
Sécurity<span class="text-security-green">Med</span> |
|
|
</h3> |
|
|
<p class="text-blue-100 mb-4"> |
|
|
Experts en cybersécurité dédiée au secteur médical et à l'imagerie DICOM. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-github"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Liens utiles</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-blue-100 hover:text-white transition">Blog technique</a></li> |
|
|
<li><a href="#" class="text-blue-100 hover:text-white transition">FAQ Sécurité DICOM</a></li> |
|
|
<li><a href="#" class="text-blue-100 hover:text-white transition">RGPD Santé</a></li> |
|
|
<li><a href="#" class="text-blue-100 hover:text-white transition">Mentions légales</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Certifications</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-security-green mr-2"></i> |
|
|
<span>LI 27001</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-security-green mr-2"></i> |
|
|
<span>Hébergeur de Données de Santé</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-security-green mr-2"></i> |
|
|
<span>DICOM Secured</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-security-green mr-2"></i> |
|
|
<span>Reconnu par l'ANSSI</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-100"></i> |
|
|
<span class="text-blue-100">12 Rue des PACS, 75000 Paris</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-3 text-blue-100"></i> |
|
|
<span class="text-blue-100">+33 1 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-3 text-blue-100"></i> |
|
|
<span class="text-blue-100">[email protected]</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-blue-800 mt-12 pt-8 text-center text-blue-100"> |
|
|
<p>© 2023 SécurityMed - Tous droits réservés. Experts en sécurité DICOM et LI 27001.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-50"> |
|
|
<button class="bg-security-green hover:bg-medical-blue text-white p-4 rounded-full shadow-lg animate-pulse"> |
|
|
<i class="fas fa-comment-medical text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const navbar = document.getElementById('navbar'); |
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.scrollY > 100) { |
|
|
navbar.classList.add('navbar-fixed'); |
|
|
} else { |
|
|
navbar.classList.remove('navbar-fixed'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contactForm'); |
|
|
const formSuccess = document.getElementById('formSuccess'); |
|
|
|
|
|
contactForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
formSuccess.classList.remove('hidden'); |
|
|
formSuccess.classList.add('block'); |
|
|
contactForm.reset(); |
|
|
setTimeout(() => { |
|
|
formSuccess.classList.add('hidden'); |
|
|
formSuccess.classList.remove('block'); |
|
|
}, 5000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
window.scrollTo({ |
|
|
top: target.offsetTop - 100, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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/secmed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
