# Construirea primei tale pagini — in limba naturala

Aceasta este lectia in care vibe coding-ul prinde cu adevarat viata. Vei construi o pagina de prezentare cu aspect profesional fara sa scrii o singura linie de cod manual. In schimb, vei descrie ce vrei in limba naturala, iar Claude Code o va construi pentru tine.

## Arta promptingului

Calitatea promptului tau determina direct calitatea rezultatului. Iata progresia:

**Prompt slab:**
> "Fa o pagina de prezentare."

Claude va construi *ceva*, dar nu va fi ceea ce ti-ai imaginat. Prea vag.

**Prompt bun:**
> "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."

Mai bine — Claude stie structura, continutul si estetica generala.

**Prompt excelent:**
> "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."

Acum Claude are culori, fonturi, text si directie de design. Rezultatul va fi foarte aproape de ce vrei.

<div class="concept-box">
<h4>Concept</h4>
Promptingul este o abilitate, nu un talent. Devii mai bun cu practica. Cheia este <strong>specificitatea</strong>: fii clar in privinta a ceea ce vrei, include detalii vizuale (culori, dimensiuni, layout) si descrie senzatia pe care o urmaresti.
</div>

## Construirea sectiunii hero

Hai sa incepem sa construim. Deschide Claude Code in folderul proiectului:

<div class="try-it">
<h4>Incearca</h4>
In Claude Code, tasteaza acest 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 va genera codul si il va scrie in `app/page.tsx`. Verifica browserul la localhost:3000 — ar trebui sa vezi pagina ta de prezentare!

## Adaugarea mai multor sectiuni

O pagina de prezentare excelenta are mai mult decat un hero. Hai sa adaugam functionalitati si dovada sociala:

<div class="try-it">
<h4>Incearca</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>

Apoi adauga dovada sociala:

```
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.
```

Si 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.
```

## Crearea unui design responsive

"Responsive" inseamna ca pagina ta arata bine pe telefoane, tablete si desktop-uri. Deoarece folosim Tailwind CSS, Claude gestioneaza deja cea mai mare parte din asta — dar hai sa verificam si sa corectam orice nu arata bine.

<div class="try-it">
<h4>Incearca</h4>
In browser, deschide Developer Tools (F12 sau Cmd+Option+I pe Mac). Apasa pe iconita de comutare dispozitive (arata ca un telefon si o tableta) pentru a previzualiza modul mobil. Daca ceva nu arata bine, spune-i lui Claude: <strong>"The features cards overlap on mobile. Make them stack vertically on screens smaller than 768px."</strong>
</div>

## Iterarea cu Claude

Acesta este ciclul de baza al vibe coding-ului: **descrie, revizuieste, rafineaza.** Incearca aceste ajustari:

- *"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."*

De fiecare data, Claude modifica codul, iar browserul se actualizeaza instant. Acest du-te-vino este rapid, distractiv si surprinzator de productiv.

<div class="pro-tip">
<h4>Pro Tip</h4>
Daca Claude face o modificare care nu iti place, spune-i: "Undo that last change" sau "Go back to how it was before." Poti folosi si Git: <code>git checkout -- app/page.tsx</code> pentru a restaura fisierul la ultima stare comisa.
</div>

## Git Checkpoint

Pagina ta de prezentare arata grozav. E timpul sa salvam:

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

<div class="honest-note">
<h4>Nota sincera</h4>
Tocmai ai construit o pagina de prezentare cu aspect profesional fara sa scrii cod manual. Dar iata ce conteaza: <strong>intelegi</strong> ce s-a construit. Stii ca exista o sectiune hero, o sectiune de functionalitati, un footer. Stii alegerile de culori si layout. Aceasta intelegere este ceea ce separa vibe coding-ul de copy-paste-ul orb. Tu directionezi constructia — AI-ul o executa.
</div>

## Concluzia cheie

Tocmai ai construit o pagina de prezentare profesionala avand o conversatie cu AI-ul. Abilitatea nu e sa tastezi cod — e sa descrii clar ce vrei si sa iterezi pe rezultat. Asta e vibe coding.

<div class="checkpoint">
<h4>Checkpoint</h4>
Pagina ta de prezentare are un hero, sectiune de functionalitati, dovada sociala si footer. Este responsive si arata profesional. Commit facut in Git. Urmeaza: sa o facem interactiva cu formulare si input de la utilizator.
</div>