# 1 · Landing page via vibe coding

**Time:** ~30 min · **Level:** beginner · **Needs:** an AI tool, a browser

## Goal
Get a clean, responsive one-page site (hero, 3 benefits, signup placeholder, footer) as plain HTML + CSS that you can open locally and later host anywhere.

## Prompt (paste this)
```text
You are a careful front-end developer. Build a landing page for: [WHAT IT IS, one sentence].
Audience: [WHO IT'S FOR]. Main promise: [ONE SENTENCE]. Tone: [e.g. friendly, direct].

Deliver exactly two files: index.html and styles.css. Rules:
- No frameworks, no build step, no external requests (no CDNs, no web fonts, no trackers).
- Sections: hero with headline + subheadline + one button; 3 benefit cards; a "how it works"
  list of 3 steps; an email signup block; a short FAQ (3 items, using <details>); footer.
- The signup block must be a clearly marked PLACEHOLDER with an HTML comment
  "<!-- REPLACE WITH EMAIL-SERVICE EMBED -->". The form must not send data anywhere yet.
- Mobile-first, responsive, readable at 360px wide. Dark or light theme: [CHOOSE].
- Accessible: semantic HTML, one <h1>, alt text, visible focus states, contrast ratio >= 4.5:1.
- Include <title>, meta description and Open Graph tags.
- Do NOT invent testimonials, statistics, logos or prices. Use clear placeholders instead.
After the code, list 5 things I must replace before publishing.
```

## Expected result
Two files. Opening `index.html` shows a polished one-page site that looks good on phone and desktop, and a visible placeholder where your email form goes.

## Troubleshooting
- **CSS not applied:** make sure both files are in the same folder and the HTML has `<link rel="stylesheet" href="styles.css">`.
- **Looks generic:** follow up with "Give it a distinct look: [two adjectives], one accent color, bigger headline, more whitespace."
- **Invented claims or fake numbers:** reply "Remove every claim I didn't provide; use placeholders."
- **Layout breaks on mobile:** "Test at 360px width and fix overflow; don't change the design."
- **Next step:** paste your email service's embed code over the marked placeholder; only then publish.

*Tested on: not yet tested (we'll update this)*