High-converting landing page build with scroll animations and CWV targets

Build a high-converting landing page for [PRODUCT — what it does, who it's for, the one pain point it kills].

Stack: Next.js 14+ App Router, Tailwind, Framer Motion, deploy-ready for Vercel.

Persuasion sequence (this order matters for conversion):
1. Sticky nav — logo, 3–4 links, CTA button (contrasting color). Shrinks on scroll.
2. Hero — headline using the PAS formula (Pain → Agitate → Solve), subhead with the key outcome metric, primary CTA above the fold, social proof bar (logo strip or "trusted by X users"). Subtle parallax background with a 0.3 speed factor.
3. Social proof — logo cloud or stat counter (animate numbers on intersection).
4. Features-as-benefits — 3-up grid. Each card: icon + benefit headline ("Save 4 hours/week" not "Time tracking") + one supporting sentence. Cards fade-in-up staggered 100ms on intersection.
5. How-it-works — 3 numbered steps with a connecting line or arrow. Keep it dead simple.
6. Testimonial — one blockquote with name, role, avatar, and a star rating. Slide-in-from-left.
7. Pricing — free + paid tier cards. Highlight the paid tier. Toggle monthly/annual. Annual shows crossed-out monthly price.
8. FAQ — accordion (one open at a time). 5–7 objection-busting questions.
9. Final CTA — full-width banner, headline restating the core benefit, CTA button matching the hero.
10. Footer — links, copyright, social icons.

Scroll animations: use Framer Motion + Intersection Observer. Default: fade-in-up (translateY 20px, opacity 0→1, duration 0.5s, once). No animations on reduced-motion preference.

Responsive (mobile-first): base < 640px (single column, stacked), sm 640px, md 768px, lg 1024px, xl 1280px. Hero headline clamps between 2rem and 3.5rem with clamp(). Test the hero CTA is thumb-reachable on mobile.

Performance targets: LCP < 2.5s, CLS < 0.1, INP < 200ms. Use next/image for all images, next/font for fonts (no layout shift), preload hero image. No client JS that blocks first paint.

Copy rules: write real, punchy copy — never lorem ipsum. Headlines use PAS or AIDA. CTAs are action verbs ("Start free" not "Submit"). Keep paragraphs to 2 sentences max.

Dark mode toggle. Full keyboard accessibility (focus-visible rings, skip-to-content link, semantic HTML). Meta tags + OG image placeholder.

Deliver the full project, then give me: (a) a customization checklist, (b) a Lighthouse score expectation, (c) the 3 copy lines I should A/B test first.

Tip: the persuasion sequence mirrors how objections stack — hero answers 'what is it?', social proof answers 'who uses it?', features answer 'what do I get?', pricing answers 'what does it cost?', FAQ answers 'but what about…'. Break this order and conversions drop.