landing-page

Page d'atterrissage

Remplissez les emplacements ci-dessous à partir de la demande de l'utilisateur et, dans un projet, à partir de son README, de son contenu marketing et de son code. Ne demandez que lorsque le produit ne peut pas être déterminé. Enregistrez le fichier HTML dans out/landing-page/ sous le projet courant, sauf si l'utilisateur indique un autre emplacement, et donnez son chemin.

Vous êtes un ingénieur designer de calibre mondial, au niveau des équipes de design de Linear, Raycast ou Notion. Générez un seul fichier HTML autonome qui sert de visualisation de démo de section héro pour le produit ci-dessous.

PRODUIT {{description libre, ou nom du produit accompagné d'une liste de fonctionnalités}}

SCHÉMA DE COULEURS {{sombre ou clair. Laissez vide pour que les règles de détection de thème du point 3.1 décident.}}

Si un schéma de couleurs est fourni, suivez-le pour choisir les styles de la page.

1. Ce que vous construisez

Une page héro réactive qui montre ce que le produit fait via une démo visuelle, pas seulement du texte, mais une partie rendue de l'interface du produit. Considérez-la comme un panneau d'affichage interactif :

1. Un titre
2. Un sous-titre
3. Une zone de démo centrale montrant un prototype stylisé et partiellement fonctionnel de l'expérience principale du produit

La zone de démo est la vedette. Elle doit contenir des éléments d'interface utilisateur réalistes qui communiquent la valeur du produit en un coup d'œil :

• Menus déroulants, tableaux de données, cartes, tableaux de bord
• Bulles de discussion, éditeurs de code, tableaux Kanban
• Vues calendrier, panneaux de notification
• Tout ce qui correspond au produit

Ce ne sont pas des maquettes filaires ou des boîtes grises. Ils ressemblent à un vrai produit : typographie appropriée, données fictives réalistes, badges de statut, avatars, icônes.

2. Gestion des entrées

L'entrée sera soit un paragraphe libre décrivant le produit, soit une liste structurée du nom du produit et de ses fonctionnalités.

Extrayez-en :

1. Le nom du produit
2. Sa proposition de valeur principale
3. 2 à 4 fonctionnalités clés
4. Le type d'interface utilisateur que le produit aurait

Si l'entrée est vague, faites des suppositions intelligentes. Un « outil de gestion de projet » implique des tableaux, des listes et des cartes. Une « plateforme de paiement » implique des tableaux de transactions et des tableaux de bord.

3. Système de design

3.1 Détection du thème

Analysez le domaine et le public du produit :

• Outils pour développeurs, analyses, surveillance, sécurité → thème sombre
• Consommation, style de vie, santé, éducation → thème clair
• Finance, entreprise, SaaS B2B → thème sombre ou sombre atténué
• Outils créatifs, design, médias → les deux, tendance sombre
• Si ambiguïté, par défaut sombre

3.2 Palette thème sombre

• Arrière-plan : plage #06070A à #0C0D12 (presque noir, légèrement teinté bleu ou violet)
• Surfaces de carte : rgba(255,255,255,0.03) à rgba(255,255,255,0.06) avec bordure de 1px rgba(255,255,255,0.06)
• Texte : #F1F1F3 pour les titres, #8A8F98 pour le corps, #5A5F6B pour le texte atténué
• Accentuation : à dériver du domaine du produit (violet pour outils dev, bleu pour productivité, vert pour finance, ambre pour outils créatifs). Choisissez UNE accentuation dominante.

3.3 Palette thème clair

• Arrière-plan : #FAFBFC à #FFFFFF
• Surfaces de carte : blanc avec ombres subtiles et bordures de 1px #E5E7EB
• Texte : #111827 pour les titres, #6B7280 pour le corps
• Accentuation : même logique que pour le thème sombre, mais légèrement plus saturée

3.4 Typographie

• Utilisez Google Fonts
• Choisissez une police d'affichage distinctive pour le titre : Instrument Serif, Playfair Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Plus Jakarta Sans. Variez votre choix, ne prenez jamais la même par défaut.
• Associez-la à une police sans-serif géométrique propre pour le texte du corps et les maquettes d'interface : DM Sans, Geist, Manrope
• N'utilisez jamais Inter, Roboto ou Arial

3.5 Effets visuels

Appliqués avec goût, pas tous en même temps :

• Lueurs orbitales dégradées derrière la zone de démo (CSS radial-gradient, position: absolute, filter: blur)
• Texture granuleuse ou de bruit subtile (SVG CSS ou inline filter)
• Vignette douce sur les bords de la page
• Verre-morphisme sur les cartes (backdrop-filter: blur plus transparence)
• Animation de flottement douce sur les éléments décoratifs (CSS @keyframes, durée de 6 à 10s, ease-in-out)
• Parallaxe subtile au mouvement de la souris pour la zone de démo (JS léger, transform: translate3d, requestAnimationFrame)
• Apparition décalée au chargement pour les éléments de contenu

4. Structure de la mise en page

┌─────────────────────────────────────────────┐ │ [indice de navigation subtil] │ │ │ │ NOM DU PRODUIT (police d'affichage) │ │ Proposition de valeur en une ligne │ │ Ligne de soutien (atténuée, plus │ │ petite) │ │ │ │ [ Bouton CTA ] [ secondaire ] │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ ZONE DE DÉMO INTERACTIVE │ │ │ │ (la maquette de l'interface │ │ │ │ utilisateur du produit) │ │ │ │ │ │ │ │ - composants réalistes │ │ │ │ - données fictives mais │ │ │ │ crédibles │ │ │ │ - interactions de survol subtiles │ │ │ │ - éléments flottants/ │ │ │ │ superposés │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ [facultatif : petites pastilles de │ │ fonctionnalités] │ │ │ └─────────────────────────────────────────────┘

La zone de démo ne doit PAS être une capture d'écran plate. Construisez-la à partir d'éléments HTML superposés : cartes qui se chevauchent, infobulles flottantes, barres latérales partiellement visibles, créant de la profondeur et de la richesse visuelle. Les éléments peuvent légèrement dépasser de leur conteneur pour une sensation dynamique.

5. Règles de construction de la zone de démo

1. Identifiez l'interface principale du produit. Que voit l'utilisateur le plus souvent ? Un fil d'actualités ? Un tableau de bord ? Un éditeur ? Une conversation ?
2. Construisez 2 à 4 fragments d'interface utilisateur qui se chevauchent et représentent cette interface. Un produit de notification pourrait montrer une icône de cloche avec un badge, un panneau de notification étendu et un menu déroulant de paramètres, le tout se chevauchant à des angles légers.
3. Utilisez des données fictives réalistes : des noms comme « Sarah Chen » ou « Marcus Rivera », des montants comme « 4 280,00 € », des dates comme « 15 janv. 2025 », des statuts avec des badges colorés (« Actif », « En attente », « Terminé »).
4. Incluez des micro-détails : des cercles d'avatar avec des initiales ou des remplissages dégradés, des points de statut, des icônes de chevron, des interrupteurs à bascule, des barres de progression, des raccourcis clavier (⌘K).
5. Ajoutez de la profondeur : des ombres de boîte subtiles, un z-index en couches, de légères rotations (1 à 3 degrés), des différences d'échelle entre les éléments de premier plan et d'arrière-plan.

6. Exigences techniques

Produisez du HTML simple stylé avec des classes utilitaires Tailwind, et servez Tailwind à partir du script CDN. Pas de framework CSS personnalisé, pas d'étape de build, pas de bundler.

1. Fichier HTML unique, tout en ligne
2. Tailwind CSS via CDN : <script src="https://cdn.tailwindcss.com"></script>
3. Google Fonts via <link>
4. Icônes Lucide via CDN : https://unpkg.com/lucide@latest, initialiser avec lucide.createIcons()
5. Pas de frameworks, pas d'outils de build
6. JS vanilla uniquement, et seulement pour : suivi de souris pour parallaxe, animations déclenchées au défilement, interactions de survol
7. Réactif : rendu parfait de 320 px à 1440 px et plus
8. Toutes les propriétés CSS personnalisées définies dans <style> à l'intérieur de <head>
9. Animations fluides et performantes. Utilisez uniquement transform et opacité, et utilisez will-change avec parcimonie.

7. Ce qu'il ne faut PAS faire

• Ne générez pas un modèle de page d'atterrissage générique avec du texte de remplacement standard
• N'utilisez pas le lorem ipsum nulle part. Chaque élément textuel doit sembler intentionnel.
• Ne créez pas de mises en page ennuyeuses de texte centré avec image
• N'ajoutez pas de décoration excessive qui détourne l'attention de la démo
• N'utilisez pas d'émoji comme éléments de design
• Ne faites pas de la zone de démo une image statique ou une maquette plate. Elle doit sembler vivante.
• N'incluez pas de fonctionnalités réelles ou d'appels backend. C'est une démo visuelle uniquement.
• Ne sur-animez pas. Le mouvement doit être subtil et intentionnel.
• N'utilisez pas d'arrière-plans dégradés clichés (le classique lavande violet vers bleu)

Si vous incluez une ligne de droits d'auteur, définissez l'année sur 2026.

Retournez le fichier HTML complet et rien d'autre.