Compétence Page d'Atterrissage Startup
Catégorie : SaaS / Startup Génère une page d'atterrissage startup à page unique optimisée pour la conversion : héros, fonctionnalités, preuve sociale, tarifs et appel à l'action. L'objectif est de communiquer la valeur en 30 secondes et de collecter l'email.
Métadonnées
Nom : startup-landing Description : Page d'atterrissage startup à page unique : héros, fonctionnalités, preuve sociale, tarifs et appel à l'action. Mots-clés déclencheurs : "startup landing", "marketing page", "product launch", "SaaS landing", "landing page"
Entrées & Paramètres
| Paramètre | Type | Requis | Valeur par défaut |
|---|---|---|---|
product_name | string | ✓ | — |
tagline | string | ✓ | — |
description | string | ✓ | — |
has_pricing | boolean | ✓ | true |
has_testimonials | boolean | — | true |
proof_count | integer | — | 4 |
pricing_tiers | array | — | [3 niveaux par défaut] |
primary_color | string | — | DESIGN.md accent |
Niveau de tarification :
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
Sections Requises (dans l'ordre)
- Navigation — Logo + liens de navigation + bouton "Commencer"
- Héros — Nom du produit, slogan, description, double CTA (primaire : "Commencer gratuitement", secondaire : "Voir la démo"), capture d'écran/maquette optionnelle du produit
- Bande de Preuve Sociale — Barre de logos (niveaux de gris, max 6)
- Fonctionnalités — Grille de 3 colonnes, icône + titre + description chacune
- Comment ça Marche — Flux horizontal en 3 étapes numérotées
- Tarifs — 3 cartes de niveaux (Starter / Pro / Entreprise)
- Témoignages — 2-3 citations avec nom, rôle, entreprise, avatar
- Bande CTA — Section sombre : titre + champ email + bouton
- Pied de page — Liens + copyright
Règles de Conception
- Responsive mobile-first
- Tous les CTA doivent avoir un href ou une action de formulaire fonctionnelle
- Cartes de tarifs : la carte mise en avant a une bordure distincte + ombre
- Avatars des témoignages : utiliser
https://i.pravatar.cc/60?img=[n]pour des placeholders cohérents - Aucun JS externe
- Tout le CSS est en ligne dans un bloc
<style> - Pas de couleurs inventées — utiliser uniquement les tokens de DESIGN.md
Sortie
Fichier unique : index.html (auto-contenu)
Auto-Vérification
- Aucun lorem ipsum nulle part
- Au moins 4 fonctionnalités listées
- Les niveaux de tarification ont une hauteur cohérente
- Tous les CTA sont clairement étiquetés et stylisés
- Mobile : se réduit à une seule colonne
- Le champ email dans la bande CTA a
type="email"etrequired