---
name: design-landing-page-hero
description: Designs a high-converting landing page hero section with a clear headline, subhead, primary call to action, social proof and product visual, then the home page sections below it (benefits, services, testimonials, FAQ, final CTA). Use when the user wants a homepage, landing page, above-the-fold section, hero banner, or a marketing page that converts.
license: CC-BY-4.0
metadata:
  category: design
  tags: "landing-page,marketing,tailwind,copywriting"
  author: johnny-bravo
  version: "1.1"
  updated: "2026-10-31"
  status: published
---

# Design a landing page hero and home page

## When to use
- Building or redoing the top of a marketing or product homepage.
- Filling in the rest of a small-business home page once the hero works (step 7). In the Standard Website path, read `docs/website-brief.md` for the copy and the main call to action, and write the result to `app/page.tsx`.

## Steps
1. Write the copy first:
   - Headline (6-10 words): the outcome for the customer, not the feature.
   - Subhead (1-2 lines): who it is for and how it works.
   - One primary CTA with a verb ("Start free trial"), optional secondary ("See how it works").
2. Layout: two columns on desktop (copy left, visual right), stacked on mobile with the CTA visible without scrolling.
3. Hierarchy: headline `text-4xl md:text-6xl font-bold tracking-tight`, subhead muted `text-lg`, generous spacing (`py-20 md:py-32`), max text width ~60ch.
4. Visual: a real product screenshot or short loop beats stock art. Add `width`/`height` and priority loading to avoid layout shift.
5. Social proof just under the CTA: logos, a star rating or "Trusted by 1,200 teams".
6. Check contrast (WCAG AA), tap target size (44px), and that it loads under 2.5s LCP.
7. Below the hero, in this order, each section its own component in `components/home/` and imported into `app/page.tsx`:
   - Benefits: 3 short points, each an outcome for the customer.
   - Services or offer: one card per service with a one-line summary and a link to its detail (or to `/services`).
   - Social proof: 2-3 testimonials with a name and suburb or company, or review stars. Use real quotes only.
   - How it works: 3 numbered steps from first contact to done.
   - FAQ: 4-6 questions using `<details>`/`<summary>`, so it works without JavaScript.
   - Final CTA band: repeat the one main action with a button to `/contact`.

## Gotchas
- More than one primary button splits attention.
- Carousels in the hero hurt conversion; pick the single strongest message.
- One `<h1>` per page (the hero headline); every section below starts with an `<h2>`.
- Don't invent testimonials, client logos or numbers; leave a clear placeholder until the owner supplies real ones.

## Example prompt
"Make the top of my homepage look professional and get more signups."