Full SaaS Landing Page Build Spec (SEO + Conversion)

You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page from this brief. Output: section-by-section UI spec, Tailwind-ready component notes, AND on-page SEO package. --- 🎯 PRODUCT CONTEXT Product name: [PRODUCT_NAME] Tagline concept: [TAGLINE — e.g. "Build X. Ship Y. Without Z."] Category: [CATEGORY — e.g. no-code app builder, form platform, CRM, analytics, AI writing tool] One-line value: [WHAT IT DOES IN ONE SENTENCE] Differentiators (3): [1] [2] [3] Primary audience: [ICP — roles, company size, pain] Competitors to position against (optional): [COMPETITOR_A], [COMPETITOR_B] — what they do well vs poorly Primary conversion goal: [SIGNUP FREE | BOOK DEMO | JOIN WAITLIST] Target keywords (primary + 2 secondary): [PRIMARY_KW], [SEC_KW_1], [SEC_KW_2] --- 🎨 DESIGN DIRECTION Aesthetic: [e.g. Clean editorial minimalism + developer-tool precision — NOT generic purple-gradient SaaS] Tone: [Confident / Warm / Technical / Playful — pick one] Theme: - Background base: [e.g. #F9F9F8 warm off-white — NOT pure #FFF] - Text: [e.g. #0F0F0F near-black] - Accent (ONE only): [e.g. #5C6BFF indigo OR #00C2A8 teal] - Neutrals: [gray scale for borders, muted text] Typography: - Display/headings: [e.g. Cabinet Grotesk, Neue Montreal, Sohne — NOT Inter/Roboto] - Body: [e.g. Geist, DM Sans, Plus Jakarta Sans] - Mono (badges, labels): [e.g. JetBrains Mono] --- 📐 PAGE STRUCTURE (build in this exact order) 1. Navigation (sticky, minimal) - Logo left | Links: [Features, Templates, Pricing, Docs, Blog] | CTA right: "[CTA_LABEL]" - On scroll: backdrop-blur + 1px border 2. Hero - H1 (2–3 lines, includes [PRIMARY_KW] naturally): [draft or generate 3 options] - Subhead (1–2 lines): [3-in-1 or core benefit] - CTAs: Primary + Secondary ("[SECONDARY — e.g. See demo →]") - Hero visual: angled product mockup (builder UI / dashboard / form — specify [HERO_VISUAL_TYPE]), layered depth, soft shadow — NOT flat screenshot - Social proof strip: "[SOCIAL_PROOF_LINE]" + logos or avatar stack 3. Problem / Comparison - H2: [e.g. "Other tools make you choose. We don't."] - 3-column compare: [Comp A limitation] | [Comp B limitation] | [YOUR PRODUCT wins on UI + scope] 4. Features (4 blocks, alternating image/text) - Feature 1: [NAME] — visual: [UI STATE] — copy: [benefit + outcome] - Feature 2: [NAME] — visual: [UI STATE] — copy: [benefit] - Feature 3: [NAME] — visual: [UI STATE] — copy: [benefit] - Feature 4: [NAME] — visual: [UI STATE] — copy: [benefit] 5. How it works (3 steps horizontal / stacked mobile) - [Step 1] → [Step 2] → [Step 3] with connector line 6. Templates / Use cases gallery - H2 + 6–8 cards: title, category tag, thumbnail description, "Use template →" 7. Testimonials (3 cards, pull quotes — no fake star ratings) 8. Pricing (3 tiers: [TIER_NAMES]) + annual toggle + comparison table (collapsible mobile) 9. FAQ (6–8 questions targeting People Also Ask + long-tail [PRIMARY_KW] variants) 10. Final CTA band (accent bg or gradient) 11. Footer (4 columns + legal) --- 🔍 SEO DELIVERABLES (mandatory, Google-searchable) Provide alongside the design: - URL slug recommendation - Title tag (≤60 chars) + meta description (≤155 chars) with [PRIMARY_KW] - Single H1 rule (only one) + H2/H3 outline mapped to sections - Schema JSON-LD: SoftwareApplication or Product + FAQPage - Internal links to suggest: [Pricing], [Docs], [Blog cluster topics] - Image alt text for hero + each feature visual - Open Graph title/description - 5 FAQ answers optimized for featured snippets (40–60 words each, direct answer first) --- ⚙️ TECHNICAL REQUIREMENTS - Framework: [Next.js App Router | Astro | HTML] + Tailwind CSS - Animations: Framer Motion — hero entrance, scroll reveals on features (subtle) - Fonts: next/font or equivalent for chosen families - Responsive: 375 / 768 / 1280 / 1440 px breakpoints - Performance: LCP target <2.5s, lazy below-fold, no CLS - a11y: semantic landmarks, focus states, contrast AA --- 🚫 EXPLICITLY AVOID Purple gradient on white cliché | Inter/Roboto primary | Stock blobs | 2021 Webflow template look | Feature carousels | Cramped padding | Keyword stuffing --- ✅ SUCCESS CRITERIA Visitor understands value in 5 seconds | Premium but approachable | Clear eye path: headline → mockup → CTA | Ranks for [PRIMARY_KW] with proper on-page structure | Production-ready component breakdown