@design-ai/cli 4.55.0

package/knowledge/patterns/landing-page-patterns.md

@@ -0,0 +1,681 @@
+---
+title: Landing page patterns
+source: refs/ui-ux-pro-max/src/ui-ux-pro-max/data/landing.csv
+upstream: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+extracted_at: 2026-05-19
+applies_to: [marketing, landing-page, conversion]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# 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.
+