Lesson 3.5 · 75 minThe landing page

Purpose: put all landing-page copy in one place, separate from layout code.

Context: docs/content.md holds the final copy, section by section.
content/site.ts already holds the business name and contact details.

Done when: content/landing.ts exports the copy for every landing section in
docs/content.md — hero, benefits, how it works, proof, FAQ, final call to
action — as structured data, word for word. Each image slot has a field for
the file and a field for its alternative text.

Constraints: copy the text exactly; do not rewrite, shorten or add anything.
If docs/content.md lacks something a section needs, leave the field empty and
list it in your report — do not invent it. No components yet. Before
reporting, compare the file with docs/content.md and confirm in one line per
section that the text is identical.

Purpose: build the hero, the first screen a visitor sees.

Context: copy in content/landing.ts (hero). Components available: Section,
Container, Heading, Button. Design direction and usage rules in
docs/design.md. The hero image is images-source/hero.jpg — copy it into the
project. The lead form comes in lesson 3.7; reserve its place.

Done when:
- components/sections/Hero.tsx shows the headline as the page's only h1, the
  supporting line, and the primary CTA button;
- on desktop the text is on the left and the image on the right; the image
  never pushes the headline below the first screen;
- beside or below the CTA there is a clearly marked empty area with id "quote"
  where the form will go (a simple outlined box that says "Quote form — lesson
  3.7" is fine for now, and is the only placeholder allowed);
- app/page.tsx renders Hero instead of the old placeholder text.

Constraints: text only from content/landing.ts. Only theme tokens. Use the
Next.js Image component and follow the image guide in
node_modules/next/dist/docs; this is the main image at the top of the page, so
load it eagerly. Alternative text from the copy file. Before reporting: build
and lint, open the page at 1280px wide, take a screenshot and describe what
is visible without scrolling.

Screenshot attached: the hero at 1280px wide.

Two problems:
1. The headline wraps to four lines. It should be at most two lines at this
   width. Give the text column more of the width before you change the font
   size.
2. The image is taller than the viewport. Limit its height so the headline,
   supporting line and CTA are all visible without scrolling on a 1280×720
   window, and crop the image to fit rather than squashing it.

Change nothing else. When done, take a new screenshot at the same size and
confirm both points.

Purpose: build the next landing section: Benefits.

Context: copy in content/landing.ts (benefits). Existing components: Section,
Container, Heading, Button, Hero. Design rules in docs/design.md.

Done when:
- components/sections/Benefits.tsx renders the section title as an h2 and each
  benefit as a card with an icon, a short title (h3) and its text;
- the section has id "benefits" so the header link scrolls to it;
- it is added to app/page.tsx below the hero;
- the cards sit in a row on desktop and form a single column on a narrow
  screen.

Constraints: text only from content/landing.ts; only theme tokens; reuse
existing components; icons from one library — tell me its name and licence
before installing. Decorative icons get empty alternative text. Before
reporting: build and lint, take a screenshot of the section at 1280px and at
375px, and check that the header link scrolls to it.

Purpose: final consistency check of the landing page.

Context: all seven sections are built from content/landing.ts.

Done when you have checked and reported on each of these:
1. every sentence on the page matches content/landing.ts and docs/content.md
   word for word — list any difference;
2. no placeholder text remains (lorem ipsum, "TODO", sample names), apart from
   the two reserved form areas;
3. exactly one h1; section titles are h2; nothing skips a level;
4. every image has alternative text from the copy file, or empty alt if
   decorative;
5. vertical spacing between sections is consistent.

Constraints: report first, change nothing. I will tell you what to fix.