Landing Page

Que fait Landing Page ?

Créez des pages d'atterrissage magnifiques et responsives en quelques minutes.

Quand l'utiliser

• Lancer un nouveau produit ou une nouvelle fonctionnalité
• Créer une page marketing ou promotionnelle
• Construire un portfolio ou un site personnel
• Créer une page d'inscription ou de liste d'attente
• Prototyper rapidement un concept de produit

Comment ça marche

1. Sections de la page

Toute page d'atterrissage efficace suit cette structure :

┌─────────────────────────────┐
│  Navigation (logo + liens)  │
├─────────────────────────────┤
│  Hero (titre + CTA)         │
├─────────────────────────────┤
│  Preuve sociale / Logos     │
├─────────────────────────────┤
│  Fonctionnalités (3-4 cartes)│
├─────────────────────────────┤
│  Comment ça marche (3 étapes)│
├─────────────────────────────┤
│  Témoignages                │
├─────────────────────────────┤
│  Tarifs (optionnel)         │
├─────────────────────────────┤
│  CTA (répéter l'action principale)│
├─────────────────────────────┤
│  Pied de page               │
└─────────────────────────────┘

2. Section Hero

Le Hero fait ou défait la page. Gardez-le simple :

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* Badge */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        Maintenant en bêta publique
      </div>

      {/* Titre — une proposition de valeur claire */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        Livrez votre produit <span className="text-blue-600">10x plus vite</span> avec l'IA
      </h1>

      {/* Sous-titre — soutient le titre */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        Arrêtez d'écrire du code standard. Laissez l'IA gérer le travail répétitif
        pendant que vous vous concentrez sur l'essentiel.
      </p>

      {/* CTA — une action principale */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          Commencer gratuitement
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          Voir la démo
        </a>
      </div>
    </section>
  )
}

3. Cartes de fonctionnalités

const features = [
  { icon: '⚡', title: 'Rapide comme l'éclair', description: 'Déployez en quelques secondes, pas en heures' },
  { icon: '🔒', title: 'Sécurisé par défaut', description: 'Sécurité de niveau entreprise intégrée' },
  { icon: '📊', title: 'Analytique', description: 'Informations en temps réel sur vos données' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">Tout ce dont vous avez besoin</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. Principes de conception

• Un seul CTA par section — ne submergez pas l'utilisateur de choix
• L'espace blanc est votre ami — padding généreux (py-20, gap-8)
• Largeur max sur le texte — ne laissez jamais le texte occuper toute la largeur (max-w-3xl)
• Hiérarchie visuelle — plus grand = plus important, utilisez font-bold avec parcimonie
• Mobile first — concevez pour mobile, améliorez avec les points de rupture md: et lg:
• Chargement rapide — utilisez next/image, minimisez le JS, pas de bibliothèques lourdes

5. Configuration rapide

# Chemin le plus rapide : Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

Checklist qualité

• S'affiche correctement sur mobile (vérifier à 375px de largeur)
• Le titre du Hero est clair et concis (< 10 mots)
• Un CTA évident au-dessus de la ligne de flottaison
• La page se charge en moins de 2 secondes
• Tous les liens et boutons fonctionnent
• Favicon et balises meta configurés

Exemples

> Créer une page d'atterrissage pour un outil d'écriture IA
> Créer une page de liste d'attente avec inscription par e-mail pour une application mobile
> Créer une page d'atterrissage portfolio avec présentation de projets