website-design-stack

Structure a production landing page by following a mandatory six-section blueprint: Hero, Social proof, Feature grid, Showcase, CTA, and Footer. This prevents design drift by enforcing consistent aesthetic direction and ship readiness across the Next.js implementation.

Choose an animation library by classifying your landing page into conservative, moderate, aggressive, editorial, or static tiers. This tier-based selection enforces consistency by using a single primary animation engine per page to avoid mismatched effects.

The best way to validate a marketing site before shipping is running a pre-ship checklist that verifies Lighthouse scores, mobile readiness, theme correctness, console cleanliness, CTA testing, OG/meta presence, hover states, reduced-motion support, and real-device validation.

TypeScript and Tailwind are recommended as part of the opinionated technical scaffolding for landing pages. This stack selection avoids arbitrary component choices by matching tier-appropriate tools like Next.js, React, and TS alongside motion or 3D tooling when needed.

You can extract exact UI component patterns using on-demand reference repo cloning guidance. This provides canonical clone commands and grep paths for specific libraries so you can pull precise implementation patterns from source when truly needed.

Landing page design looks inconsistent when animation tiers are mixed and sections lack a structured blueprint. Apply a single primary animation engine per page and follow the mandatory six-section layout in order to maintain aesthetic direction and conversion readiness.