| 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. |
