| Concevez une landing-page HTML/CSS/JS *single-page* pour **CyberShield Conseils** (cabinet européen de cybersécurité) intégrant ces éléments clés : ### 1. **Identité visuelle** - **Palette** : Bleu professionnel (#0a4a8d) + gris technologique (#2e374a) + accents vert confiance (#4caf50) - **Typographie** : Polices sans-serif modernes (ex: Montserrat pour les titres, Open Sans pour le corps) - **Imagerie** : - Photos HD optimisées (WebP format, <300KB) - Thématiques : *Cyber-menaces* (imagerie médicale/satellites/robotique), *Futur digital* (IA/post-quantique) ### 2. **Sections obligatoires** | Section | Contenu spécifique | |------------------|------------------------------------------------------------------------------------| | **Hero** | Tagline percutant + CTA "Diagnostic Gratuit" + Fond vectoriel dynamique (canvasJS) | | **Menaces** | Cards avec icônes SVG : 1) Imagerie médicale 2) Sécurité spatiale 3) Robotique | | **Réglementation**| Badges interactifs : NIS2 / DORA / CRA (modal au clic expliquant impacts) | | **Vision 2030** | Timeline horizontale : IA générative → Cryptographie post-quantique → Scénarios futurs | | **Confiance** | Logos clients + Certifications (ANSSI, ISO 27001) + Micro-interactions au survol | ### 3. **Exigences techniques** - **Responsive** : Mobile-first (media queries), menu burger en mobile, grilles CSS Flexbox/Grid - **Interactions** : - Parallaxe douce sur la section Hero - Animation au scroll (librairie AOS) - Formulaire de contact avec validation JS - **SEO** : Meta tags optimisés, balises sémantiques (article, section), temps de chargement <3s ### 4. **Tonalité & Messages** - **Copywriting** : Vocabulaire expert mais accessible (niveau grand public éduqué) - **Positionnement** : "Votre bouclier digital face aux risques de demain" - **Preuves sociales** : Zone témoignages (carousel) + indicateurs de confiance (ex: "100+ entreprises protégées") ### Livrables attendus** ├── index.html ├── assets/ │ ├── css/ (styles.css + responsive.css) │ ├── js/ (main.js + animations.js) │ └── img/ (images optimisées + icônes SVG) └── README.md (notes techniques) **Objectif final** : Équilibre entre rigueur technique (compliance WCAG 2.1) et émotion (sentiment de sécurité innovante). |