Show the finished sites on the landing page

[singhharsh1708]

/examples shipped in #382 reachable only from the nav and the footer. The landing page is where people actually arrive, and it went straight from "here are the six pipeline steps" to "here are some abstract style swatches" without ever showing a finished site.

This adds a section between them: the pipeline says how it works, this says what comes out of it. Three cards, real screenshots of the built bundles, each linking to the bundle itself rather than a preview.

Costs almost nothing

Measured on an emulated phone, cold cache, against production without the section:

	script	total	requests
Production, before	283 KiB	382 KiB	36
This build, after	285 KiB	397 KiB	35

2 KiB of JavaScript. The card art does not appear in either figure because it is loading="lazy" and sits well below the fold, so it costs nothing until someone scrolls to it. The rest of the difference is the extra server-rendered markup.

The manifest is read in page.tsx, the server shell, and only {slug, name, tagline} is passed down — the same reason the preset catalogue is read there rather than imported by the client component. The palette notes stay on the server.

Verified

Server-rendered markup contains all three links and the heading, checked with curl rather than by reading the JSX. Screenshotted at 1440 and 390 wide: cards sit three-up on desktop, stack on mobile, no horizontal overflow at either.

Suite 480 to 483. Two mutants: eager-loading the card art fails, and pointing the shell at a manifest that does not exist fails.

tsc --noEmit clean, eslint clean, production build clean.

The section renders nothing at all if the manifest is missing or unreadable, rather than shipping an empty heading.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
scrollcraft	Ready	Preview	Sep 8, 2026 2:36pm UTC