ui-ux-pro-max-skill/cli/assets/data/landing.csv

1	No	Pattern Name	Keywords	Section Order	Primary CTA Placement	Color Strategy	Recommended Effects	Conversion Optimization	Pattern ID	Aliases
2	1	Hero + Features + CTA	hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action	Hero with headline/image > Value prop > Key features (3-5) > CTA section > 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. For CTA label text, verify at least 4.5:1 against the button fill; use 7:1 only when the product explicitly targets AAA normal-text contrast. Keep focus and component boundaries independently visible. Disable hero parallax under reduced motion and render its static final state.	hero-features-cta
3	2	Hero + Testimonials + CTA	hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state	Hero > Problem statement > Solution overview > Testimonials carousel > 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 a concise set of verified testimonials with photo, name, and role. CTA after social proof. Provide previous/next and pause controls; stop rotation on focus, hover, and reduced motion; announce slide position. Previous/next buttons and keyboard controls must expose every slide without dragging.	hero-testimonials-cta	Conversion-Optimized + Social Proof|Feature-Rich + Social Proof|Feature-Rich Showcase + Social Proof|Hero-Centric + Social Proof|Minimal & Direct + Social Proof|Social Proof + Conversion|Social Proof + Feature-Rich|Social Proof-Focused|Social Proof-Focused + Conversion|Social Proof-Focused + Feature-Rich|Storytelling + Social Proof|Storytelling-Driven + Social Proof
4	3	Product Demo + Features	demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo	Hero > Product video/mockup (center) > Feature breakdown per section > Comparison (optional) > 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	Use an interactive demo only when it explains value better than static media. Provide captions, transcript, visible play/pause controls, and a non-video fallback; do not autoplay under reduced motion. Pause media when offscreen or hidden and keep the final product state available as static content.	product-demo-features	Conversion-Optimized + Demo|Feature-Rich Showcase + Demo|Feature-Rich Showcase + Interactive Demo|Interactive Demo + Feature-Rich|Interactive Demo + Minimal|Interactive Product Demo|Interactive Product Demo + Minimal|Interactive Product Demo + Social Proof|Interactive Product Demo + Storytelling|Minimal & Direct + Demo|Social Proof-Focused + Demo
5	4	Minimal Single Column	minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean	Hero headline > Short description > Benefit bullets (3 max) > CTA > Footer	Center, large CTA button	Minimalist: Brand + white #FFFFFF + accent. Verify CTA label text against its button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.	Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)	Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.	minimal-single-column	Minimal & Direct
6	5	Funnel (3-Step Conversion)	funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding	Hero > Step 1 (problem) > Step 2 (solution) > Step 3 (action) > 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.	funnel-3-step-conversion	Conversion + Feature-Rich|Conversion-Optimized|Conversion-Optimized + Feature-Rich|Feature-Rich + Conversion|Hero-Centric + Conversion|Minimal & Direct + Conversion|Minimal + Conversion
7	6	Comparison Table + CTA	comparison, table, compare, versus, cta	Hero > Problem intro > Comparison table (product vs competitors) > Pricing (optional) > 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.	comparison-table-cta
8	7	Lead Magnet + Form	lead, form, signup, capture, email, magnet	Hero (benefit headline) > Lead magnet preview (ebook cover, checklist, etc) > Form (minimal fields) > 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	Ask only for information necessary to deliver the lead magnet. Preview its value and show submission progress.	lead-magnet-form
9	8	Pricing Page + CTA	pricing, plans, tiers, comparison, cta	Hero (pricing headline) > Price comparison cards > Feature comparison table > FAQ section > 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	Highlight the plan that matches the intended audience and show actual annual savings transparently. Use FAQs to address concerns.	pricing-page-cta
10	9	Video-First Hero	video, hero, media, visual, engaging	Hero with video background > Key features overlay > Benefits section > CTA	Overlay on video (center/bottom) + Bottom section	Use an overlay strong enough for text contrast. Brand accent for CTA. Light text only when the measured contrast passes.	Video autoplay muted, parallax scroll, text fade-in on scroll	Use video only when it demonstrates value better than static media. Add captions for accessibility. Compress video for performance. Provide captions and a visible pause control; use a static poster when reduced motion is requested. Pause video when offscreen or hidden; the reduced-motion poster must preserve the final message and CTA.	video-first-hero
11	10	Scroll-Triggered Storytelling	storytelling, scroll, narrative, story, immersive	Intro hook > Chapter 1 (problem) > Chapter 2 (journey) > Chapter 3 (solution) > 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	Keep the narrative understandable without scroll-driven effects. Use progress indicator. Mobile: simplify animations. Keep DOM reading order complete; disable parallax and scroll-scrub under reduced motion. Pause scroll animation when offscreen or hidden and render each chapter in its final readable state under reduced motion.	scroll-triggered-storytelling	Storytelling + Data|Storytelling + Feature-Rich|Storytelling + Hero-Centric|Storytelling-Driven|Storytelling-Driven + Feature-Rich|Storytelling-Driven + Hero|Storytelling-Driven + Hero-Centric
12	11	AI Personalization Landing	ai, personalization, smart, recommendation, dynamic	Dynamic hero (personalized) > Relevant features > Tailored testimonials > 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	Validate personalization with consent-aware product analytics. Requires analytics integration. Fallback for new users.	ai-personalization-landing
13	12	Waitlist/Coming Soon	waitlist, coming-soon, launch, early-access, notify, countdown accessibility, pause animation, reduced motion final state, verified waitlist count	Hero with countdown > Product teaser/preview > Email capture form > 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	Explain early-access benefits without fabricated scarcity. Show a waitlist count only when it is current, verified, and dated. Provide a static launch deadline, pause decorative countdown motion when offscreen/hidden, and render the final readable timer state under reduced motion. Email form and referral actions remain keyboard operable.	waitlist-coming-soon
14	13	Comparison Table Focus	comparison, table, versus, compare, features	Hero (problem statement) > Comparison matrix (you vs competitors) > Feature deep-dive > 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. Measure comparison performance with product-specific analytics. Be factual. Include pricing if favorable.	comparison-table-focus
15	14	Pricing-Focused Landing	pricing, price, cost, plans, subscription	Hero (value proposition) > Pricing cards (3 tiers) > Feature comparison > FAQ > 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	Show actual monthly and annual totals and savings transparently. Explain plan differences and address objections in the FAQ.	pricing-focused-landing
16	15	App Store Style Landing	app, mobile, download, store, install, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state, single pointer buttons	Hero with device mockup > Screenshots carousel > Features with icons > Reviews/ratings > 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 and only current verified ratings. Provide platform-specific CTAs, buttons and keyboard controls in addition to swipe, and pause any auto-rotation. Stop auto-rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected screenshot as the static final state.	app-store-style-landing
17	16	FAQ/Documentation Landing	faq, documentation, help, support, questions, faq/documentation, knowledge base	Hero with search bar > Popular categories > FAQ accordion > 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.	faq-documentation-landing	FAQ + Minimal|Feature-Rich + Documentation|Minimal + Documentation
18	17	Immersive/Interactive Experience	immersive, interactive, experience, 3d, animation, immersive/interactive experience	Full-screen interactive element > Guided product tour > Key benefits revealed > 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	Measure engagement for the specific audience and device mix. Performance trade-off. Provide skip option. Mobile fallback essential. Provide skip, keyboard, reduced-motion, and non-3D fallback paths. Pause animation when offscreen/hidden and preserve the completed final state when reduced motion is enabled.	immersive-interactive-experience	Immersive + Feature-Rich|Immersive + Interactive
19	18	Event/Conference Landing	event, conference, meetup, registration, schedule, hero-centric design, hero-centric, countdown accessibility, pause animation, reduced motion final state	Hero (date/location/countdown) > Speakers grid > Agenda/schedule > Sponsors > 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. Expose the exact deadline as text; pause decorative countdown motion offscreen/hidden and show a static final state under reduced motion.	event-conference-landing
20	19	Product Review/Ratings Focused	reviews, ratings, testimonials, social-proof, social-proof-focused, stars	Hero (product + aggregate rating) > Rating breakdown > Individual reviews > 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.	product-review-ratings-focused
21	20	Community/Forum Landing	community, forum, social, members, discussion, verified member count, live update accessibility, pause updates, reduced motion final state	Hero (community value prop) > Popular topics/categories > Active members showcase > 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	Preview real community value and simplify onboarding. Show member and activity counts only when current, verified, and dated; label activity as live only when backed by an active real-time source. Provide pause/update-frequency controls for moving feeds, stop work offscreen/hidden, and keep a static final state under reduced motion.	community-forum-landing
22	21	Before-After Transformation	before-after, transformation, results, comparison, accessible drag interaction, drag single pointer alternative, keyboard drag alternative	Hero (problem state) > Transformation slider/comparison > How it works > 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. Measure the outcome with product-specific analytics. Real results. Specific metrics. Guarantee offer. Provide arrow buttons and keyboard steps so dragging is not required. Arrow buttons and keyboard steps expose the same final before/after positions; reduced motion removes reveal animation.	before-after-transformation
23	22	Marketplace / Directory	marketplace, directory, search, listing, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state, marketplace carousel, keyboard carousel controls	Hero (Search focused) > Categories > Featured Listings > Trust/Safety > 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 is the primary CTA. Reduce friction with useful suggestions. For featured-listing carousels, provide previous/next and play/pause buttons, full keyboard access, and a single-pointer alternative to swiping; stop rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected listing as the static final state.	marketplace-directory
24	23	Newsletter / Content First	newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct, verified subscriber count, dated social proof	Hero (Value Prop + Form) > Recent Issues/Archives > Social Proof (Subscriber count) > 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	Keep the form to the fields actually required and link to a sample issue. Show a subscriber count only when it is current, verified, and dated; otherwise use qualitative social proof.	newsletter-content-first
25	24	Webinar Registration	webinar, registration, event, training, live, webinar ticker accessibility, pause ticker, verified seat availability, verified live status, reduced motion final state	Hero (Topic + Timer + Form) > What you'll learn > Speaker Bio > Urgency/Bonuses > 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	State the event time and timezone in text. Claim limited seats or live status only when current capacity or stream state is verified and timestamped. Provide pause/hide controls for the urgency ticker, stop it offscreen/hidden, keep controls keyboard operable, and render a static final state under reduced motion.	webinar-registration
26	25	Enterprise Gateway	enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state	Hero (Video/Mission) > Solutions by Industry > Solutions by Role > Client Logos > 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. Provide pause/stop for video and rotating logos; stop on focus and reduced motion. Logo carousel controls must be keyboard operable; pause moving media offscreen/hidden and render a static final state under reduced motion.	enterprise-gateway	Data-Dense + Drill-Down|Data-Dense + Storytelling|Data-Dense Dashboard
27	26	Portfolio Grid	portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals	Hero (Name/Role) > Project Grid (Masonry) > About/Philosophy > 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.	portfolio-grid	Portfolio + Hero-Centric
28	27	Horizontal Scroll Journey	horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven	Intro (Vertical) > The Journey (Horizontal Track) > Detail Reveal > 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. Preserve a normal vertical navigation path and disable scroll-jacking under reduced motion. Pause effects when offscreen/hidden and render every chapter in its final vertical reading state under reduced motion.	horizontal-scroll-journey
29	28	Bento Grid Showcase	bento, grid, features, modular, apple-style, showcase, feature-rich showcase	Hero > Bento Grid (Key Features) > Detail Cards > Tech Specs > 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. Keep cards usable without hover and suppress tilt/stagger/video motion under reduced motion. Pause card media offscreen/hidden and render cards in their final readable state under reduced motion.	bento-grid-showcase
30	29	Interactive 3D Configurator	3d, configurator, customizer, interactive, product, interactive product demo, accessible drag interaction, drag single pointer alternative, keyboard drag alternative	Hero (Configurator) > Feature Highlight (synced) > Price/Specs > 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	Let users inspect product details before purchase. Provide buttons and keyboard controls for rotate/zoom plus a 2D/specification fallback. Named rotate/zoom buttons and keyboard controls replace drag gestures; pause rendering offscreen/hidden and preserve the chosen configuration as the reduced-motion final state.	interactive-3d-configurator
31	30	AI-Driven Dynamic Landing	ai, dynamic, personalized, adaptive, generative	Prompt/Input Hero > Generated Result Preview > How it Works > 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. Disable typing, shimmer, and morphing effects when reduced motion is requested. Pause loaders offscreen/hidden and render generated content in its final state under reduced motion.	ai-driven-dynamic-landing
32	31	Feature-Rich Showcase	feature-rich, feature-rich showcase, features, showcase, product showcase	Hero (value prop) > Feature grid/cards (4-6) > Use cases or benefits > Social proof or logos > CTA	Hero (sticky) + After features + Bottom	Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.	Feature card hover lift, scroll reveal, icon micro-interactions	Clear feature hierarchy. One key message per card. Strong CTA repetition.	feature-rich-showcase	Feature-Rich + Data|Showcase + Feature-Rich
33	32	Hero-Centric Design	hero-centric, hero-centric design, hero-first, hero above fold	Full-bleed Hero (headline + visual) > Single value prop strip > Key benefit or proof > Primary CTA	Hero dominant (center/bottom) + Sticky nav CTA	Hero: High-impact visual. Minimal text. Verify CTA label text against the button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.	Hero parallax or video, CTA pulse on scroll, minimal chrome	One primary CTA. Let the hero dominate the initial viewport without hiding the next content cue. Use a static hero and non-pulsing CTA when reduced motion is requested; provide video controls. Pause hero media offscreen/hidden and keep the final hero message and CTA static under reduced motion.	hero-centric-design	Feature-Rich Showcase + Hero-Centric|Hero-Centric + Feature-Rich|Hero-Centric Design + Feature-Rich
34	33	Trust & Authority + Conversion	trust & authority, trust, authority, conversion, credibility, enterprise, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state	Hero (mission/credibility) > Proof (logos, certs, stats) > Solution overview > Clear CTA path	Contact Sales / Get Quote (primary) + Nav	Navy/Grey corporate. Trust blue. Accent for CTA only.	Logo carousel, stat counters, testimonial strip	Security badges. Case studies. Transparent pricing. Low-friction form. Provide pause/stop and stop the logo carousel on focus, hover, and reduced motion. Previous/next controls provide the keyboard equivalent; pause offscreen/hidden and render a static logo set under reduced motion.	trust-authority-conversion	Conversion + Trust|Conversion-Optimized + Trust|Data + Trust|Feature-Rich Showcase + Trust|Hero-Centric + Trust|Social Proof-Focused + Trust|Storytelling + Trust|Trust & Authority|Trust & Authority + Accessible|Trust & Authority + Conversion-Optimized|Trust & Authority + Feature|Trust & Authority + Feature-Rich|Trust & Authority + Minimal|Trust & Authority + Social Proof
35	34	Real-Time / Operations Landing	real-time, real-time monitor, operations, dashboard, telemetry, live data, live ticker accessibility, pause live updates, verified live status, reduced motion final state	Hero (product + live preview or status) > Key metrics/indicators > How it works > CTA (Start trial / Contact)	Primary CTA in nav + After metrics	Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.	Live data ticker, status pulse, minimal decoration	Offer a demo or sandbox and show trust signals. Label telemetry as live only when backed by a current source, with update time and stale state. Provide pause/hide or update-frequency controls for tickers and previews, stop offscreen/hidden work, support keyboard controls, and render a static final snapshot under reduced motion.	real-time-operations-landing	Feature-Rich + Real-Time|Feature-Rich Showcase + Real-Time|Real-Time + Feature-Rich|Real-Time Monitoring|Trust & Authority + Real-Time