Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CyberSecB2B - Expertise en Cybersécurité pour l'Imagerie Médicale</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&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"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0078D4', | |
| secondary: '#20B2AA', | |
| accent: '#FF6B6B', | |
| dark: '#0F172A', | |
| medBlue: '#1E40AF', | |
| lightBlue: '#EFF6FF' | |
| }, | |
| fontFamily: { | |
| heading: ['Montserrat', 'sans-serif'], | |
| body: ['Open Sans', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(120deg, #0c4a6e 0%, #1d4ed8 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .grid-pattern { | |
| background-image: | |
| radial-gradient(#e2e8f0 1px, transparent 1px), | |
| radial-gradient(#e2e8f0 1px, transparent 1px); | |
| background-position: 0 0, 25px 25px; | |
| background-size: 50px 50px; | |
| } | |
| .icon-bg { | |
| background-color: rgba(32, 178, 170, 0.1); | |
| } | |
| .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="font-body text-gray-700 bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <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 text-white"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <span class="ml-3 font-heading font-bold text-xl text-gray-900">CyberSec<span class="text-secondary">B2B</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#problematiques" class="font-medium text-gray-600 hover:text-primary transition">Problématiques</a> | |
| <a href="#solutions" class="font-medium text-gray-600 hover:text-primary transition">Solutions</a> | |
| <a href="#expertise" class="font-medium text-gray-600 hover:text-primary transition">Expertise</a> | |
| <a href="#contact" class="font-medium text-gray-600 hover:text-primary transition">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:hidden hidden bg-white" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#problematiques" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Problématiques</a> | |
| <a href="#solutions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Solutions</a> | |
| <a href="#expertise" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Expertise</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-24"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="font-heading font-bold text-3xl sm:text-4xl md:text-5xl leading-tight">Protégez vos Données d'Imagerie Médicale</h1> | |
| <h2 class="text-lg sm:text-xl md:text-2xl font-medium mt-5 text-blue-100">Expertise en Cybersécurité spécialisée pour le Secteur de la Santé</h2> | |
| <p class="mt-6 text-lg">Nous aidons les établissements de santé à sécuriser leurs flux DICOM, à se conformer à la norme ISO 27001 et à blinder leurs réseaux d'imagerie.</p> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-4"> | |
| <a href="#contact" class="bg-accent hover:bg-red-500 text-white font-bold py-3 px-8 rounded-lg shadow-lg transition duration-300 text-center">Demander une Consultation Gratuite</a> | |
| <a href="#solutions" class="bg-white text-primary hover:bg-gray-100 font-bold py-3 px-8 rounded-lg shadow-lg transition duration-300 text-center">Découvrir nos Solutions</a> | |
| </div> | |
| </div> | |
| <div class="relative flex justify-center"> | |
| <div class="relative z-10 floating"> | |
| <div class="bg-white p-6 rounded-2xl shadow-xl w-full max-w-md"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-60 flex items-center justify-center"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <div class="w-24 h-24 rounded-full bg-blue-50 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-4xl text-primary"></i> | |
| </div> | |
| <div class="mt-4 bg-primary rounded-full px-4 py-2 text-white text-sm"> | |
| Systèmes d'imagerie sécurisés | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mt-4"> | |
| <div class="bg-gray-200 h-2 rounded"></div> | |
| <div class="bg-gray-200 h-2 rounded"></div> | |
| <div class="bg-gray-200 h-2 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-10 -right-10 w-72 h-72 rounded-full bg-blue-500 opacity-20 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problematic Section --> | |
| <section id="problematiques" class="py-16 sm:py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl text-dark">Les Risques Numériques en Imagerie Médicale: Une Menace Croissante</h2> | |
| <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">La sécurité des systèmes d'imagerie médicale est aujourd'hui une priorité absolue pour garantir la continuité des soins et la protection des données de santé.</p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Challenge 1 --> | |
| <div class="bg-lightBlue rounded-2xl p-6 hover:shadow-md transition"> | |
| <div class="icon-bg w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-bug text-2xl text-secondary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-4">Vulnérabilités des systèmes d'imagerie</h3> | |
| <p class="mt-3">Faiblesses spécifiques des systèmes DICOM et PACS exploitées par les cybercriminels.</p> | |
| </div> | |
| <!-- Challenge 2 --> | |
| <div class="bg-lightBlue rounded-2xl p-6 hover:shadow-md transition"> | |
| <div class="icon-bg w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-balance-scale text-2xl text-secondary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-4">Risques de non-conformité</h3> | |
| <p class="mt-3">Exposition aux sanctions liées à la norme ISO 27001, RGPD, HDS et autres réglementations.</p> | |
| </div> | |
| <!-- Challenge 3 --> | |
| <div class="bg-lightBlue rounded-2xl p-6 hover:shadow-md transition"> | |
| <div class="icon-bg w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-heartbeat text-2xl text-secondary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-4">Impacts sur les soins patients</h3> | |
| <p class="mt-3">Cyberattaques pouvant paralyser les services cliniques et compromettre la sécurité des patients.</p> | |
| </div> | |
| <!-- Challenge 4 --> | |
| <div class="bg-lightBlue rounded-2xl p-6 hover:shadow-md transition"> | |
| <div class="icon-bg w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-network-wired text-2xl text-secondary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-4">Complexité de l'analyse réseau</h3> | |
| <p class="mt-3">Difficultés à surveiller et sécuriser les réseaux d'imagerie avec des outils comme Wireshark.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-16 sm:py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl text-dark">Nos Solutions de Cybersécurité Sur-Mesure</h2> | |
| <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">Des services spécialement conçus pour répondre aux défis uniques de l'imagerie médicale</p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-2xl shadow-md p-8 transition duration-300"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-search text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-5">Audit de Sécurité et Évaluation des Risques</h3> | |
| <p class="mt-3">Analyse complète de vos infrastructures d'imagerie, identification des failles selon les standards ISO 27001.</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-2xl shadow-md p-8 transition duration-300"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-file-contract text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-5">Mise en Conformité ISO 27001</h3> | |
| <p class="mt-3">Accompagnement expert pour la certification ISO 27001 de vos services d'imagerie.</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-2xl shadow-md p-8 transition duration-300"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-lock text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-5">Sécurisation des Flux DICOM</h3> | |
| <p class="mt-3">Protection de vos données patient sensibles transitant via le protocole DICOM.</p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-2xl shadow-md p-8 transition duration-300"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-radar text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-5">Analyse Réseau et Détection d'Intrusions</h3> | |
| <p class="mt-3">Expertise Wireshark pour le monitoring et la sécurisation de vos réseaux d'imagerie.</p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-2xl shadow-md p-8 transition duration-300"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-graduation-cap text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-5">Formation et Sensibilisation</h3> | |
| <p class="mt-3">Formez vos équipes aux bonnes pratiques de cybersécurité en imagerie médicale.</p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-2xl shadow-md p-8 transition duration-300"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-wrench text-2xl text-primary"></i> | |
| </div> | |
| <h3 class="font-heading font-bold text-xl mt-5">Solutions Intégrées</h3> | |
| <p class="mt-3">Déploiement de systèmes de sécurité adaptés aux environnements d'imagerie médicale.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Expertise Section --> | |
| <section id="expertise" class="py-16 sm: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 items-center"> | |
| <div> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl text-dark">L'Expertise Spécialisée au Service de Votre Sécurité</h2> | |
| <p class="mt-5 text-lg">Notre équipe combine une expertise technique pointue en cybersécurité et une connaissance approfondie des défis spécifiques au domaine de l'imagerie médicale.</p> | |
| <div class="mt-8 space-y-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 rounded-full p-2"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Spécialisation unique en imagerie médicale</h3> | |
| <p>Compréhension des flux de données DICOM et architecture PACS</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 rounded-full p-2"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Maîtrise des normes critiques</h3> | |
| <p>Mise en conformité ISO 27001, RGPD, HDS et réglementations sectorielles</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 rounded-full p-2"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Compétence technique avancée</h3> | |
| <p>Analyse de paquets avec Wireshark, sécurisation du protocole DICOM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 rounded-full p-2"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold text-lg">Approche pragmatique et orientée résultats</h3> | |
| <p>Solutions pratiques adaptées aux contraintes opérationnelles des établissements de santé</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="relative"> | |
| <div class="grid-pattern rounded-3xl border border-gray-200 overflow-hidden h-80 lg:h-96 flex items-center justify-center"> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 w-full max-w-sm"> | |
| <h3 class="font-heading font-bold text-xl text-center mb-4">Niveau de sécurisation par secteur</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Systèmes DICOM</span> | |
| <span>68%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-red-400 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Infrastructure réseau</span> | |
| <span>42%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-orange-400 h-2.5 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Stockage d'images</span> | |
| <span>77%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 77%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Transfert de données</span> | |
| <span>35%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-orange-400 h-2.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-500 text-center">* Étude sur la sécurisation des systèmes d'imagerie médicale - 2023</p> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -left-4 w-24 h-24 rounded-full bg-secondary bg-opacity-20 blur-xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Social Proof --> | |
| <section class="py-16 bg-gradient-to-r from-blue-50 to-indigo-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl text-dark">La Confiance des Professionnels de Santé</h2> | |
| <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">Nous collaborons avec les établissements médicaux leaders pour sécuriser leurs systèmes d'imagerie</p> | |
| </div> | |
| <div class="mt-12 flex justify-center items-center flex-wrap gap-10"> | |
| <div class="bg-white rounded-xl p-4 h-20 w-40 flex items-center justify-center"> | |
| <span class="font-bold text-xl text-gray-800">Hôpital A</span> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 h-20 w-40 flex items-center justify-center"> | |
| <span class="font-bold text-xl text-gray-800">Clinique B</span> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 h-20 w-40 flex items-center justify-center"> | |
| <span class="font-bold text-xl text-gray-800">C.H.U. C</span> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 h-20 w-40 flex items-center justify-center"> | |
| <span class="font-bold text-xl text-gray-800">Réseau D</span> | |
| </div> | |
| </div> | |
| <div class="mt-16 max-w-4xl mx-auto"> | |
| <div class="bg-white rounded-2xl shadow-md p-8 relative"> | |
| <div class="absolute top-0 left-8 -mt-4 bg-accent text-white font-bold py-1 px-4 rounded-full">TÉMOIGNAGE</div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-user-md text-2xl text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="ml-6"> | |
| <p class="italic text-lg">"La mise en conformité ISO 27001 de notre système PACS réalisée par CyberSecB2B nous a non seulement protégés des cybermenaces, mais aussi apporté une valeur ajoutée dans nos certifications qualité."</p> | |
| <p class="mt-4 font-bold">Dr. Martin Dupont, Chef de service Radiologie</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 sm:py-20 bg-dark text-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 items-center"> | |
| <div> | |
| <h2 class="font-heading font-bold text-3xl md:text-4xl">Prêt à Renforcer la Sécurité de Votre Imagerie Médicale ?</h2> | |
| <p class="mt-5 text-gray-200 text-lg">Contactez-nous pour une consultation gratuite afin d'évaluer vos besoins en cybersécurité et découvrir comment protéger vos données sensibles.</p> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="mt-1"> | |
| <i class="fas fa-envelope text-accent"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Email</h3> | |
| <p class="text-gray-300">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mt-1"> | |
| <i class="fas fa-phone text-accent"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Téléphone</h3> | |
| <p class="text-gray-300">01 23 45 67 89</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mt-1"> | |
| <i class="fas fa-map-marker-alt text-accent"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Adresse</h3> | |
| <p class="text-gray-300">123 Avenue de la Sécurité, 75000 Paris</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-2xl shadow-xl p-8"> | |
| <form id="contact-form"> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300">Nom complet</label> | |
| <input type="text" id="name" class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-lg text-white focus:ring-primary focus:border-primary shadow-sm p-3" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300">Email</label> | |
| <input type="email" id="email" class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-lg text-white focus:ring-primary focus:border-primary shadow-sm p-3" required> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium text-gray-300">Établissement</label> | |
| <input type="text" id="company" class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-lg text-white focus:ring-primary focus:border-primary shadow-sm p-3" required> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300">Message</label> | |
| <textarea id="message" rows="4" class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-lg text-white focus:ring-primary focus:border-primary shadow-sm p-3" required></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-accent hover:bg-red-500 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-300">Envoyer la demande</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-10 bg-darker text-gray-400"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <span class="ml-3 font-heading font-bold text-white">CyberSec<span class="text-secondary">B2B</span></span> | |
| </div> | |
| <div class="mt-6 md:mt-0"> | |
| <p class="text-sm">Expertise en cybersécurité pour les systèmes d'imagerie médicale</p> | |
| <p class="text-sm mt-1">Conformité ISO 27001, sécurité DICOM, Wireshark, HDS</p> | |
| </div> | |
| <div class="mt-6 md:mt-0 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center"> | |
| <p>© 2023 CyberSecB2B. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| // Display success message (in real implementation, you would send this to a server) | |
| alert(`Merci ${name}! Votre demande a été envoyée. Nous vous contacterons à ${email} dans les plus brefs délais.`); | |
| // Reset form | |
| this.reset(); | |
| }); | |
| </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/cybersecb2b" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |