---
trigger: always_on
---

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