Dal brief alla landing page

Brief for a landing page

What: Crumb Club is a weekly box of two sourdough loaves baked by a small neighbourhood bakery and left at a pickup shelf on Saturday mornings.
Who: Busy neighbours who like good bread but never get to the bakery before it sells out.
One action: Join the waiting list for the next open spot (email: hello@crumbclub.example).
Tone: Warm, a little playful, plain words.
Colors: cream background, dark brown text, a deep rust accent.
Facts we can state: Two loaves per box. Pickup on Saturday mornings. Spots are limited, so there is a waiting list.
Facts we do NOT have yet: price, address, reviews, number of members.

<!DOCTYPE html>
<!-- Contrast (WCAG): text #2b2118 on #fffaf2 = 15.15:1; muted #5c4a3a on #fffaf2 = 8.1:1; button label #ffffff on #8a3410 = 8.14:1 -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crumb Club - Saturday sourdough, saved for you</title>
<meta name="description" content="A weekly box of two sourdough loaves, ready on Saturday mornings. Join the waiting list.">
<style>
:root {
  --bg: #fffaf2;
  --surface: #f3e6d3;
  --text: #2b2118;
  --muted: #5c4a3a;
  --accent: #8a3410;
  --on-accent: #ffffff;
  --space: 1.25rem;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; }
header, main, footer { max-width: 40rem; margin: 0 auto; padding: 0 var(--space); }
header { padding-top: var(--space); font-weight: 700; letter-spacing: .02em; }
.hero { padding: 2.5rem 0 2rem; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 1rem; }
.lead { font-size: 1.125rem; color: var(--muted); margin: 0 0 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; padding: 0 1.5rem; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; border-radius: var(--radius); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.benefits { background: var(--surface); border-radius: var(--radius); padding: var(--space); margin: 0 0 2rem; }
.benefits h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.benefits ul { margin: 0; padding-left: 1.25rem; }
.benefits li { margin: .5rem 0; }
.closing { margin: 0 0 2.5rem; }
footer { padding-bottom: 2rem; color: var(--muted); font-size: .9375rem; }
footer a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--text); }
@media (min-width: 40rem) { h1 { font-size: 2.75rem; } .hero { padding-top: 4rem; } }
</style>
</head>
<body>
<header>Crumb Club</header>
<main>
  <section class="hero">
    <h1>Saturday sourdough, saved for you.</h1>
    <p class="lead">Two fresh loaves from a small neighbourhood bakery, waiting on the pickup shelf when your weekend starts.</p>
    <a class="button" href="mailto:hello@crumbclub.example?subject=Waiting%20list">Join the waiting list</a>
  </section>
  <section class="benefits" aria-labelledby="why">
    <h2 id="why">What you get</h2>
    <ul>
      <li>Two loaves in every box.</li>
      <li>Pickup on Saturday mornings, no queue.</li>
      <li>Limited spots, so the bread is never sold out on you.</li>
    </ul>
  </section>
  <p class="closing">Spots are limited. Send us a note and we will tell you when the next one opens.</p>
</main>
<footer>
  <a href="mailto:hello@crumbclub.example">hello@crumbclub.example</a>
</footer>
</body>
</html>

---
name: landing-page-builder
description: Turns a short brief (what, who, one action, tone) into a one-page, mobile-first HTML landing page in a single file with themeable CSS variables. Use when someone needs a simple landing page and has no design or copy yet.
---
# Landing Page Builder
A four-line brief becomes one self-contained `landing.html`, ready to open in a browser.

## When to use
- You need a one-page site for a product, service, event or newsletter.
- You want a clean starting point, not a full website or a framework project.

## Inputs
Ask for these four items. If one is missing, ask; do not guess.
1. What it is (one sentence).
2. Who it is for.
3. The one action a visitor should take (for example "join the waitlist"), plus where it goes (an email address or a link the user gives you).
4. Tone (for example warm, calm, direct).
Optional: brand colors, a name, real facts the user wants shown (price, place, dates).

## Steps
1. Restate the brief in four lines and confirm the single action.
2. Pick the colors: a text color, a background, one accent. Compute the contrast ratio of each text/background pair with a small script. Body text and button label must reach 4.5:1; adjust the color until they do.
3. Write the copy: a headline (the outcome for the visitor), one supporting sentence, three short benefits taken only from the brief, one closing line that repeats the action.
4. Build the page in one file: theme colors and spacing as CSS variables on `:root`; system font stack; mobile-first CSS with one `min-width` breakpoint.
5. Put exactly one filled button above the fold. Any other link is plain text. Buttons and links are at least 44px by 44px, with a visible `:focus-visible` style.
6. Use semantic HTML: `header`, `main`, `section`, `footer`, one `h1`, `lang` on `html`, a viewport meta tag.
7. Check: no absolute web addresses (links starting with a scheme such as http), no `<script src>`, no web fonts, no images that need a download. Use inline SVG or no image.
8. Record the computed contrast ratios in an HTML comment at the top of the file.

## Output
Write `landing.html` (or `landing-2.html` if it exists) next to the brief. Then reply with: the file name, the colors and their contrast ratios, and a list of placeholders the user must fill in.
Page skeleton: header (name) -> hero (h1, sentence, button) -> benefits (3 items) -> closing line -> footer.

## Rules
- Never invent testimonials, customer logos, ratings, user counts, prices or dates. If the page would be stronger with one, add a `TODO` note in your reply instead.
- Never add tracking, forms that post to a server, or external requests.
- Write results to a new file, never overwrite the user's existing files.
- Keep the brief and copy local; ask before assuming a missing detail.
- Legal pages (privacy, terms) are out of scope; tell the user to get them from a professional.