UX patterns and section templates for Astro lead generation sites. Hero, features, testimonials, CTAs, FAQ sections. Use for page section design.
name: astro-ux
description: UX patterns and section templates for Astro lead generation sites. Hero, features, testimonials, CTAs, FAQ sections. Use for page section design.
Astro UX Skill
Purpose
Provides UX patterns and section templates for lead generation pages.
Core Rules
Mobile-first design — 375px base, scale up
Clear visual hierarchy — One primary CTA per viewport
Trust before ask — Social proof before form
Minimal friction — Short forms, clear labels
Accessible — Keyboard nav, focus states, contrast
Section Types
Conversion Sections
Section
Purpose
Key Elements
Hero
First impression + CTA
Headline, subhead, CTA, trust badge
CTA Banner
Mid-page conversion
Headline, button, urgency
Form Section
Lead capture
Form, benefits, trust
Final CTA
Last chance
Summary, strong CTA
Trust Sections
Section
Purpose
Key Elements
Testimonials
Social proof
Quote, name, photo, stars
Logos
Authority
Client/partner logos
Stats
Credibility
Numbers, context
Reviews
Third-party proof
Google/Trustpilot reviews
Content Sections
Section
Purpose
Key Elements
Features
Benefits
Icon, title, description
How It Works
Process
Numbered steps
FAQ
Objection handling
Questions, answers
About
Trust building
Story, team, values
Mobile Patterns
Sticky mobile CTA bar
Thumb-friendly buttons (44px min)
Collapsible navigation
Touch-friendly form inputs
Page Flow
Hero (with CTA)
↓
Trust Signal (logos/stats)
↓
Features/Benefits
↓
Social Proof (testimonials)
↓
How It Works
↓
CTA Banner
↓
FAQ
↓
Final CTA
↓
Footer