tsl-devkit/skills/thirdparty/ui-ux-pro-max/data/landing.csv

1	No	Pattern Name	Keywords	Section Order	Primary CTA Placement	Color Strategy	Recommended Effects	Conversion Optimization
2	1	Hero + Features + CTA	hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, 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.
3	2	Hero + Testimonials + CTA	hero, testimonials, social-proof, social-proof-focused, social proof focused, 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.
4	3	Product Demo + Features	demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo	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.
5	4	Minimal Single Column	minimal, simple, direct, minimal & direct, minimal-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.
6	5	Funnel (3-Step Conversion)	funnel, conversion, conversion-optimized, conversion optimized, 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.
7	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.
8	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.
9	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.
10	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.
11	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.
12	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.
13	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.
14	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.
15	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.
16	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.
17	16	FAQ/Documentation Landing	faq, documentation, help, support, questions, faq/documentation, knowledge base	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.
18	17	Immersive/Interactive Experience	immersive, interactive, experience, 3d, animation, immersive/interactive experience	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.
19	18	Event/Conference Landing	event, conference, meetup, registration, schedule, hero-centric design, hero-centric	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.
20	19	Product Review/Ratings Focused	reviews, ratings, testimonials, social-proof, social-proof-focused, 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.
21	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.
22	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.
23	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.
24	23	Newsletter / Content First	newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct	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.
25	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.
26	25	Enterprise Gateway	enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority	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.
27	26	Portfolio Grid	portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals	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.
28	27	Horizontal Scroll Journey	horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven	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.
29	28	Bento Grid Showcase	bento, grid, features, modular, apple-style, showcase, feature-rich 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.
30	29	Interactive 3D Configurator	3d, configurator, customizer, interactive, product, interactive product demo	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.
31	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.
32	31	Feature-Rich Showcase	feature-rich, feature-rich showcase, features, showcase, product showcase	1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. 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.
33	32	Hero-Centric Design	hero-centric, hero-centric design, hero-first, hero above fold	1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA	Hero dominant (center/bottom) + Sticky nav CTA	Hero: High-impact visual. Minimal text. CTA 7:1 contrast.	Hero parallax or video, CTA pulse on scroll, minimal chrome	One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy.
34	33	Trust & Authority + Conversion	trust & authority, trust, authority, conversion, credibility, enterprise	1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. 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.
35	34	Real-Time / Operations Landing	real-time, real-time monitor, operations, dashboard, telemetry, live data	1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. 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	For ops/security/iot products. Demo or sandbox link. Trust signals.