brainzcode/premium-landing

Premium landing page

A landing page is finished when it survives three checks: it matches its reference or brief, it holds together at every width from 320 to 1920, and nothing on it is accidental. Most of the work is the third one.

Decide the mode first

Reference mode — the user supplied a screenshot, PDF, URL, or "replicate this". Accuracy is the goal and "close enough" is failure. Measure the reference numerically before writing any CSS. Load reference-replication.

Brief mode — the user described a business, an audience, or a feeling, with no picture. Composition is yours to choose; the house rules and section library set the quality floor.

If both are present, reference wins for anything it covers and the brief fills the gaps. If neither is clear, ask — a landing page built for the wrong mode is wasted.

Ask only what changes the build

Do not interrogate. Four things actually alter the output:

1. Stack — HTML / React / Next / Astro. Scaffold from templates/<stack>/.
2. Brand basics — name, and either a palette or "pull it from the reference".
3. Locale — drives currency, date format, UK vs US spelling. Ask once, stay consistent.
4. Sections — only if neither a reference nor an obvious page type implies them.

Everything else has a defensible default. Use it and say what you assumed.

Build order

Working out of order causes rework, because the hero's height constrains everything above the fold and the design tokens constrain every section.

1. Tokens — surfaces, ink, lines, accent, radii, easing, one fluid type scale. references/design-system.md.
2. Hero — the most-corrected element on every build. 100svh, rhythm in vh. references/house-rules.md.
3. Sections, in reference order. references/sections.md. Any slot needing a photograph: source it now, do not leave a grey box — ../stock-imagery/SKILL.md.
4. Footer, then the finishing sequence below.
5. Verify. Not optional — see below.

The traps

Read references/traps.md before writing grid, marquee, SVG-icon or full-bleed-image code. Six failures in there are silent: valid CSS, no error, wrong layout somewhere else. They cost hours each the first time and minutes with the reference open.

Verification is part of the build

A landing page that has not been screenshotted at real widths is not finished. Run the bundled harness:

scripts/verify.sh <url> --sweep          # overflow 320→1920 + hero fit
scripts/verify.sh <url> --shot 390x844   # a single viewport

It handles the macOS 500px window clamp that silently fakes every mobile screenshot. Details and the manual fallback: references/verification.md.

Three checks must pass:

• No horizontal overflow at any width from 320 to 1920.
• Hero fits one screen at 390×844, 414×896 and 1600×900, or grows deliberately.
• Reduced motion still renders every section — no element left mid-animation.

Finishing sequence

Requested on every real build. This is the definition of done, not a nice-to-have:

1. lenis-smooth-scroll
2. premium-mobile-menu
3. social-share-favicons
4. build-credit
5. README.md about the page — its sections, tokens, breakpoints, deploy steps — not about the tooling that made it
6. .gitignore; commit message with no AI co-author line unless asked
7. Deploy notes (GitHub Pages needs .nojekyll when any path begins with _)

What "premium" actually means here

It is not gradients and glass. It is: type that scales fluidly instead of jumping at breakpoints; motion that only ever touches transform and opacity; spacing measured against the axis it lives on; no dead bands; and a mobile layout that was designed rather than inherited from the desktop one. Every one of those is checkable, which is why they are the standard.

References

File	Read it when
references/house-rules.md	always — the corrections that recur on every build
references/traps.md	before grid, marquee, SVG icons, full-bleed images
references/design-system.md	setting up tokens and the type scale
references/sections.md	building hero, marquee, accordion, card rail, footer
references/verification.md	verifying, or a screenshot looks wrong
../reference-replication/SKILL.md	a reference image or URL was supplied
../stock-imagery/SKILL.md	the page needs photography and none was supplied