# Construire ta premiere page — en langage courant

C'est la lecon ou le vibe coding prend vraiment tout son sens. Tu vas construire une page d'accueil d'aspect professionnel sans ecrire une seule ligne de code a la main. A la place, tu decris ce que tu veux en langage courant, et Claude Code le construit pour toi.

## L'art du prompting

La qualite de ton prompt determine directement la qualite du resultat. Voici la progression :

**Mauvais prompt :**
> "Fais une landing page."

Claude construira *quelque chose*, mais ce ne sera pas ce que tu avais en tete. Trop vague.

**Bon prompt :**
> "Create a landing page for Waitlist Wizard with a hero section that has a headline 'Be the first to know', a subtitle explaining we're building something new, and a centered email signup form with a blue submit button. Use a clean, modern design with lots of whitespace."

Mieux — Claude connait la structure, le contenu et l'esthetique generale.

**Excellent prompt :**
> "Create a landing page for Waitlist Wizard with a hero section that has a headline 'Be the first to know', a subtitle 'We're building something special. Join the waitlist and be among the first to get access.' Centered email signup form with a navy blue (#1e3a5f) submit button. Use the Inter font from Google Fonts. The color scheme is navy blue (#1e3a5f) and white. Fully responsive. Clean, modern SaaS design with generous whitespace."

Maintenant Claude a les couleurs, les polices, le texte et la direction du design. Le resultat sera tres proche de ce que tu veux.

<div class="concept-box">
<h4>Concept</h4>
Le prompting est une competence, pas un talent. Tu t'ameliores avec la pratique. La cle est la <strong>specificite</strong> : sois clair sur ce que tu veux, inclus des details visuels (couleurs, tailles, disposition), et decris l'ambiance que tu recherches.
</div>

## Construire la section hero

Commencons a construire. Ouvre Claude Code dans ton dossier de projet :

<div class="try-it">
<h4>Essaie</h4>
Dans Claude Code, tape ce prompt :<br><br>
<strong>"Replace the content of app/page.tsx with a landing page for Waitlist Wizard. Create a hero section with:
- A headline: 'Be the First to Know'
- A subtitle: 'We're building something special. Join the waitlist and be among the first to get access when we launch.'
- A centered email signup form with an input field and a navy blue submit button
- Clean, modern SaaS design with generous whitespace
- Use navy blue (#1e3a5f) as the primary color and white background
- The page should be fully responsive"</strong>
</div>

Claude generera le code et l'ecrira dans `app/page.tsx`. Verifie ton navigateur sur localhost:3000 — tu devrais voir ta page d'accueil !

## Ajouter d'autres sections

Une bonne landing page a plus qu'un simple hero. Ajoutons des fonctionnalites et de la preuve sociale :

<div class="try-it">
<h4>Essaie</h4>
<strong>"Add a features section below the hero with 3 cards in a row. Each card should have an icon, a title, and a short description. The three features are:
1. 'Lightning Fast' — 'Get notified instantly when we launch. No spam, ever.'
2. 'Early Access' — 'Be among the first to try new features before anyone else.'
3. 'Free Forever' — 'The waitlist is free. No credit card required.'
Use subtle icons and keep the design consistent with the hero."</strong>
</div>

Ensuite, ajoute de la preuve sociale :

```
Add a simple social proof section below features. Show "Join 2,000+ people 
already on the waitlist" with a row of small avatar circles (use colored 
circles as placeholders). Keep it minimal and trust-building.
```

Et un footer :

```
Add a simple footer with "Built by Waitlist Wizard" on the left and links 
to "Privacy Policy" and "Terms of Service" on the right. Use a subtle 
border-top to separate it from the content.
```

## Rendre le tout responsive

"Responsive" signifie que ta page est belle sur telephones, tablettes et ordinateurs de bureau. Puisque nous utilisons Tailwind CSS, Claude gere deja la plupart de ca — mais verifions et corrigeons tout ce qui ne va pas.

<div class="try-it">
<h4>Essaie</h4>
Dans ton navigateur, ouvre les Outils de developpement (F12 ou Cmd+Option+I sur Mac). Clique sur l'icone de basculement d'appareil (qui ressemble a un telephone et une tablette) pour previsualiser la vue mobile. Si quelque chose ne va pas, dis a Claude : <strong>"The features cards overlap on mobile. Make them stack vertically on screens smaller than 768px."</strong>
</div>

## Iterer avec Claude

C'est la boucle principale du vibe coding : **decrire, revoir, affiner.** Essaie ces ameliorations :

- *"Make the headline bigger — 48px on desktop, 32px on mobile"*
- *"Change the submit button color to a gradient from #1e3a5f to #2d5a8e"*
- *"Add a subtle gradient to the hero background — white to light blue (#f0f7ff)"*
- *"The spacing between sections feels too tight. Add more padding — at least 80px between each section."*

A chaque fois, Claude modifie le code, et ton navigateur se rafraichit instantanement. Cet aller-retour est rapide, amusant et etonnamment productif.

<div class="pro-tip">
<h4>Astuce pro</h4>
Si Claude fait un changement qui ne te plait pas, dis-lui simplement : "Undo that last change" ou "Go back to how it was before." Tu peux aussi utiliser Git : <code>git checkout -- app/page.tsx</code> pour restaurer le fichier a son dernier etat commite.
</div>

## Checkpoint Git

Ta landing page a fiere allure. C'est le moment de sauvegarder :

```
git add .
git commit -m "landing page complete with hero, features, social proof, and footer"
```

<div class="honest-note">
<h4>Note honnete</h4>
Tu viens de construire une landing page d'aspect professionnel sans ecrire de code a la main. Mais voici ce qui compte : tu <strong>comprends</strong> ce qui a ete construit. Tu sais qu'il y a une section hero, une section fonctionnalites, un footer. Tu connais les choix de couleurs et de disposition. Cette comprehension est ce qui separe le vibe coding du copier-coller aveugle. Tu diriges la construction — l'IA l'execute.
</div>

## Point cle

Tu viens de construire une landing page professionnelle en ayant une conversation avec l'IA. La competence n'est pas de taper du code — c'est de decrire ce que tu veux clairement et d'iterer sur le resultat. C'est ca le vibe coding.

<div class="checkpoint">
<h4>Checkpoint</h4>
Ta landing page a un hero, une section fonctionnalites, de la preuve sociale et un footer. Elle est responsive et a un aspect professionnel. Git commite. Prochaine etape : la rendre interactive avec des formulaires et des saisies utilisateur.
</div>