Landing page patterns¶
Battle-tested section orders for landing pages, with conversion-optimization notes. Use as scaffolding for new landing pages.
1. Hero + Features + CTA¶
Keywords: hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action
Section order: - 1. Hero with headline/image - 2. Value prop - 3. Key features (3-5) - 4. CTA section - 5. Footer
Primary CTA placement: Hero (sticky) + Bottom
Color strategy: Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color
Recommended effects: Hero parallax, feature card hover lift, CTA glow on hover
Conversion notes: Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
2. Hero + Testimonials + CTA¶
Keywords: hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta
Section order: - 1. Hero - 2. Problem statement - 3. Solution overview - 4. Testimonials carousel - 5. CTA
Primary CTA placement: Hero (sticky) + Post-testimonials
Color strategy: Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant
Recommended effects: Testimonial carousel slide animations, quote marks animations, avatar fade-in
Conversion notes: Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
3. Product Demo + Features¶
Keywords: demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo
Section order: - 1. Hero - 2. Product video/mockup (center) - 3. Feature breakdown per section - 4. Comparison (optional) - 5. CTA
Primary CTA placement: Video center + CTA right/bottom
Color strategy: Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222
Recommended effects: Video play button pulse, feature scroll reveals, demo interaction highlights
Conversion notes: Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
4. Minimal Single Column¶
Keywords: minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean
Section order: - 1. Hero headline - 2. Short description - 3. Benefit bullets (3 max) - 4. CTA - 5. Footer
Primary CTA placement: Center, large CTA button
Color strategy: Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey
Recommended effects: Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)
Conversion notes: Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
5. Funnel (3-Step Conversion)¶
Keywords: funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding
Section order: - 1. Hero - 2. Step 1 (problem) - 3. Step 2 (solution) - 4. Step 3 (action) - 5. CTA progression
Primary CTA placement: Each step: mini-CTA. Final: main CTA
Color strategy: Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color
Recommended effects: Step number animations, progress bar fill, step transitions smooth scroll
Conversion notes: Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
6. Comparison Table + CTA¶
Keywords: comparison, table, compare, versus, cta
Section order: - 1. Hero - 2. Problem intro - 3. Comparison table (product vs competitors) - 4. Pricing (optional) - 5. CTA
Primary CTA placement: Table: Right column. CTA: Below table
Color strategy: Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark
Recommended effects: Table row hover highlight, price toggle animations, feature checkmark animations
Conversion notes: Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
7. Lead Magnet + Form¶
Keywords: lead, form, signup, capture, email, magnet
Section order: - 1. Hero (benefit headline) - 2. Lead magnet preview (ebook cover - checklist - etc) - 3. Form (minimal fields) - 4. CTA submit
Primary CTA placement: Form CTA: Submit button
Color strategy: Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color
Recommended effects: Form focus state animations, input validation animations, success confirmation animation
Conversion notes: Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
8. Pricing Page + CTA¶
Keywords: pricing, plans, tiers, comparison, cta
Section order: - 1. Hero (pricing headline) - 2. Price comparison cards - 3. Feature comparison table - 4. FAQ section - 5. Final CTA
Primary CTA placement: Each card: CTA button. Sticky CTA in nav
Color strategy: Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow
Recommended effects: Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close
Conversion notes: Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
9. Video-First Hero¶
Keywords: video, hero, media, visual, engaging
Section order: - 1. Hero with video background - 2. Key features overlay - 3. Benefits section - 4. CTA
Primary CTA placement: Overlay on video (center/bottom) + Bottom section
Color strategy: Dark overlay 60% on video. Brand accent for CTA. White text on dark.
Recommended effects: Video autoplay muted, parallax scroll, text fade-in on scroll
Conversion notes: 86% higher engagement with video. Add captions for accessibility. Compress video for performance.
10. Scroll-Triggered Storytelling¶
Keywords: storytelling, scroll, narrative, story, immersive
Section order: - 1. Intro hook - 2. Chapter 1 (problem) - 3. Chapter 2 (journey) - 4. Chapter 3 (solution) - 5. Climax CTA
Primary CTA placement: End of each chapter (mini) + Final climax CTA
Color strategy: Progressive reveal. Each chapter has distinct color. Building intensity.
Recommended effects: ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions
Conversion notes: Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
11. AI Personalization Landing¶
Keywords: ai, personalization, smart, recommendation, dynamic
Section order: - 1. Dynamic hero (personalized) - 2. Relevant features - 3. Tailored testimonials - 4. Smart CTA
Primary CTA placement: Context-aware placement based on user segment
Color strategy: Adaptive based on user data. A/B test color variations per segment.
Recommended effects: Dynamic content swap, fade transitions, personalized product recommendations
Conversion notes: 20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
12. Waitlist/Coming Soon¶
Keywords: waitlist, coming-soon, launch, early-access, notify
Section order: - 1. Hero with countdown - 2. Product teaser/preview - 3. Email capture form - 4. Social proof (waitlist count)
Primary CTA placement: Email form prominent (above fold) + Sticky form on scroll
Color strategy: Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.
Recommended effects: Countdown timer animation, email validation feedback, success confetti, social share buttons
Conversion notes: Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
13. Comparison Table Focus¶
Keywords: comparison, table, versus, compare, features
Section order: - 1. Hero (problem statement) - 2. Comparison matrix (you vs competitors) - 3. Feature deep-dive - 4. Winner CTA
Primary CTA placement: After comparison table (highlighted row) + Bottom
Color strategy: Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.
Recommended effects: Table row hover highlight, feature checkmark animations, sticky comparison header
Conversion notes: Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
14. Pricing-Focused Landing¶
Keywords: pricing, price, cost, plans, subscription
Section order: - 1. Hero (value proposition) - 2. Pricing cards (3 tiers) - 3. Feature comparison - 4. FAQ - 5. Final CTA
Primary CTA placement: Each pricing card + Sticky CTA in nav + Bottom
Color strategy: Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.
Recommended effects: Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open
Conversion notes: Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
15. App Store Style Landing¶
Keywords: app, mobile, download, store, install
Section order: - 1. Hero with device mockup - 2. Screenshots carousel - 3. Features with icons - 4. Reviews/ratings - 5. Download CTAs
Primary CTA placement: Download buttons prominent (App Store + Play Store) throughout
Color strategy: Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.
Recommended effects: Device mockup rotations, screenshot slider, star rating animations, download button pulse
Conversion notes: Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
16. FAQ/Documentation Landing¶
Keywords: faq, documentation, help, support, questions, faq/documentation, knowledge base
Section order: - 1. Hero with search bar - 2. Popular categories - 3. FAQ accordion - 4. Contact/support CTA
Primary CTA placement: Search bar prominent + Contact CTA for unresolved questions
Color strategy: Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.
Recommended effects: Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons
Conversion notes: Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
17. Immersive/Interactive Experience¶
Keywords: immersive, interactive, experience, 3d, animation, immersive/interactive experience
Section order: - 1. Full-screen interactive element - 2. Guided product tour - 3. Key benefits revealed - 4. CTA after completion
Primary CTA placement: After interaction complete + Skip option for impatient users
Color strategy: Immersive experience colors. Dark background for focus. Highlight interactive elements.
Recommended effects: WebGL, 3D interactions, gamification elements, progress indicators, reward animations
Conversion notes: 40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
18. Event/Conference Landing¶
Keywords: event, conference, meetup, registration, schedule, hero-centric design, hero-centric
Section order: - 1. Hero (date/location/countdown) - 2. Speakers grid - 3. Agenda/schedule - 4. Sponsors - 5. Register CTA
Primary CTA placement: Register CTA sticky + After speakers + Bottom
Color strategy: Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.
Recommended effects: Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown
Conversion notes: Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
19. Product Review/Ratings Focused¶
Keywords: reviews, ratings, testimonials, social-proof, social-proof-focused, stars
Section order: - 1. Hero (product + aggregate rating) - 2. Rating breakdown - 3. Individual reviews - 4. Buy/CTA
Primary CTA placement: After reviews summary + Buy button alongside reviews
Color strategy: Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.
Recommended effects: Star fill animations, review filtering, helpful vote interactions, photo lightbox
Conversion notes: User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
20. Community/Forum Landing¶
Keywords: community, forum, social, members, discussion
Section order: - 1. Hero (community value prop) - 2. Popular topics/categories - 3. Active members showcase - 4. Join CTA
Primary CTA placement: Join button prominent + After member showcase
Color strategy: Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.
Recommended effects: Member avatars animation, activity feed live updates, topic hover previews, join success celebration
Conversion notes: Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding.
21. Before-After Transformation¶
Keywords: before-after, transformation, results, comparison
Section order: - 1. Hero (problem state) - 2. Transformation slider/comparison - 3. How it works - 4. Results CTA
Primary CTA placement: After transformation reveal + Bottom
Color strategy: Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.
Recommended effects: Slider comparison interaction, before/after reveal animations, result counters, testimonial videos
Conversion notes: Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
22. Marketplace / Directory¶
Keywords: marketplace, directory, search, listing
Section order: - 1. Hero (Search focused) - 2. Categories - 3. Featured Listings - 4. Trust/Safety - 5. CTA (Become a host/seller)
Primary CTA placement: Hero Search Bar + Navbar 'List your item'
Color strategy: Search: High contrast. Categories: Visual icons. Trust: Blue/Green.
Recommended effects: Search autocomplete animation, map hover pins, card carousel
Conversion notes: Search bar is the CTA. Reduce friction to search. Popular searches suggestions.
23. Newsletter / Content First¶
Keywords: newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct
Section order: - 1. Hero (Value Prop + Form) - 2. Recent Issues/Archives - 3. Social Proof (Subscriber count) - 4. About Author
Primary CTA placement: Hero inline form + Sticky header form
Color strategy: Minimalist. Paper-like background. Text focus. Accent color for Subscribe.
Recommended effects: Text highlight animations, typewriter effect, subtle fade-in
Conversion notes: Single field form (Email only). Show 'Join X, 000 readers'. Read sample link.
24. Webinar Registration¶
Keywords: webinar, registration, event, training, live
Section order: - 1. Hero (Topic + Timer + Form) - 2. What you'll learn - 3. Speaker Bio - 4. Urgency/Bonuses - 5. Form (again)
Primary CTA placement: Hero (Right side form) + Bottom anchor
Color strategy: Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.
Recommended effects: Countdown timer, speaker avatar float, urgent ticker
Conversion notes: Limited seats logic. 'Live' indicator. Auto-fill timezone.
25. Enterprise Gateway¶
Keywords: enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority
Section order: - 1. Hero (Video/Mission) - 2. Solutions by Industry - 3. Solutions by Role - 4. Client Logos - 5. Contact Sales
Primary CTA placement: Contact Sales (Primary) + Login (Secondary)
Color strategy: Corporate: Navy/Grey. High integrity. Conservative accents.
Recommended effects: Slow video background, logo carousel, tab switching for industries
Conversion notes: Path selection (I am a...). Mega menu navigation. Trust signals prominent.
26. Portfolio Grid¶
Keywords: portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals
Section order: - 1. Hero (Name/Role) - 2. Project Grid (Masonry) - 3. About/Philosophy - 4. Contact
Primary CTA placement: Project Card Hover + Footer Contact
Color strategy: Neutral background (let work shine). Text: Black/White. Accent: Minimal.
Recommended effects: Image lazy load reveal, hover overlay info, lightbox view
Conversion notes: Visuals first. Filter by category. Fast loading essential.
27. Horizontal Scroll Journey¶
Keywords: horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven
Section order: - 1. Intro (Vertical) - 2. The Journey (Horizontal Track) - 3. Detail Reveal - 4. Vertical Footer
Primary CTA placement: Floating Sticky CTA or End of Horizontal Track
Color strategy: Continuous palette transition. Chapter colors. Progress bar #000000.
Recommended effects: Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator
Conversion notes: Immersive product discovery. High engagement. Keep navigation visible.
28. Bento Grid Showcase¶
Keywords: bento, grid, features, modular, apple-style, showcase, feature-rich showcase
Section order: - 1. Hero - 2. Bento Grid (Key Features) - 3. Detail Cards - 4. Tech Specs - 5. CTA
Primary CTA placement: Floating Action Button or Bottom of Grid
Color strategy: Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.
Recommended effects: Hover card scale (1.02), video inside cards, tilt effect, staggered reveal
Conversion notes: Scannable value props. High information density without clutter. Mobile stack.
29. Interactive 3D Configurator¶
Keywords: 3d, configurator, customizer, interactive, product, interactive product demo
Section order: - 1. Hero (Configurator) - 2. Feature Highlight (synced) - 3. Price/Specs - 4. Purchase
Primary CTA placement: Inside Configurator UI + Sticky Bottom Bar
Color strategy: Neutral studio background. Product: Realistic materials. UI: Minimal overlay.
Recommended effects: Real-time rendering, material swap animation, camera rotate/zoom, light reflection
Conversion notes: Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
30. AI-Driven Dynamic Landing¶
Keywords: ai, dynamic, personalized, adaptive, generative
Section order: - 1. Prompt/Input Hero - 2. Generated Result Preview - 3. How it Works - 4. Value Prop
Primary CTA placement: Input Field (Hero) + 'Try it' Buttons
Color strategy: Adaptive to user input. Dark mode for compute feel. Neon accents.
Recommended effects: Typing text effects, shimmering generation loaders, morphing layouts
Conversion notes: Immediate value demonstration. 'Show, don't tell'. Low friction start.
31. Feature-Rich Showcase¶
Keywords: feature-rich, feature-rich showcase, features, showcase, product showcase
Section order: - 1. Hero (value prop) - 2. Feature grid/cards (4-6) - 3. Use cases or benefits - 4. Social proof or logos - 5. CTA
Primary CTA placement: Hero (sticky) + After features + Bottom
Color strategy: Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.
Recommended effects: Feature card hover lift, scroll reveal, icon micro-interactions
Conversion notes: Clear feature hierarchy. One key message per card. Strong CTA repetition.
32. Hero-Centric Design¶
Keywords: hero-centric, hero-centric design, hero-first, hero above fold
Section order: - 1. Full-bleed Hero (headline + visual) - 2. Single value prop strip - 3. Key benefit or proof - 4. Primary CTA
Primary CTA placement: Hero dominant (center/bottom) + Sticky nav CTA
Color strategy: Hero: High-impact visual. Minimal text. CTA 7:1 contrast.
Recommended effects: Hero parallax or video, CTA pulse on scroll, minimal chrome
Conversion notes: One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy.
33. Trust & Authority + Conversion¶
Keywords: trust & authority, trust, authority, conversion, credibility, enterprise
Section order: - 1. Hero (mission/credibility) - 2. Proof (logos - certs - stats) - 3. Solution overview - 4. Clear CTA path
Primary CTA placement: Contact Sales / Get Quote (primary) + Nav
Color strategy: Navy/Grey corporate. Trust blue. Accent for CTA only.
Recommended effects: Logo carousel, stat counters, testimonial strip
Conversion notes: Security badges. Case studies. Transparent pricing. Low-friction form.
34. Real-Time / Operations Landing¶
Keywords: real-time, real-time monitor, operations, dashboard, telemetry, live data
Section order: - 1. Hero (product + live preview or status) - 2. Key metrics/indicators - 3. How it works - 4. CTA (Start trial / Contact)
Primary CTA placement: Primary CTA in nav + After metrics
Color strategy: Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.
Recommended effects: Live data ticker, status pulse, minimal decoration
Conversion notes: For ops/security/iot products. Demo or sandbox link. Trust signals.