Build a Next.js marketing website from scratch

You are helping me build a marketing website using Next.js (App Router), TypeScript and Tailwind CSS.

Context:
- Product/company: [describe your product in 2-3 sentences]
- Target audience: [who the site is for]
- Primary goal of the site: [e.g. get sign-ups, book demos, sell a product]
- Tone/style: [e.g. minimal and technical, warm and friendly, bold and playful]

Build the following pages/sections as a single-page marketing site:
1. A header with logo placeholder, nav links (Home, Features, Pricing, FAQ, Contact) and a primary CTA button
2. A hero section with a headline, subheadline, primary + secondary CTA, and a placeholder for a product screenshot
3. A "logos" or social proof strip (use neutral placeholder text, not fake company names)
4. A features section with 3-6 feature cards (icon, title, 1-2 sentence description)
5. A "how it works" section with 3-4 numbered steps
6. A pricing section with 2-3 tiers (use realistic but clearly placeholder pricing)
7. An FAQ section with 5-6 questions using a native <details> accordion (no extra JS library)
8. A final call-to-action band
9. A footer with nav groups and legal links

Requirements:
- Use semantic HTML (header, nav, main, section, footer) and one <h1> on the page
- Every image needs meaningful alt text; every interactive element must be keyboard accessible
- Fully responsive: mobile-first, test the breakpoints you use (sm/md/lg)
- Use CSS variables or a small design-tokens file for color and spacing, not hardcoded hex values scattered everywhere
- Do not fabricate statistics, testimonials, or customer logos — use clearly labeled placeholder content I can replace
- After generating the code, explain the file structure you created and why you split components the way you did
- List any follow-up decisions I need to make (real copy, real images, analytics, domain, deployment)