csh/tsl-devkit
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squashed 'docs/standards/playbook/' changes from c3f8137..25d895d

Browse Source 
25d895d 🐛 fix(gitea_workflow): clean up temp repos after job steps
2bc3b11 🐛 fix(gitea_workflow): clean up temporary repo dirs in workflows
98c3f30 📝 docs(agent_rules): allow plan execution on current branch
16c7230 📝 docs(prompts): define custom verify layering
8efc4dd 🐛 fix(skills): quote commit-message description
bc8498f 🐛 fix(ci): install tomli for gitea tests
55cda3b 🐛 fix(tests): report missing toml parser clearly
c0729c7 🐛 fix(playbook): import Optional for cli compatibility
63e24bf 📦 deps(skills): sync thirdparty skills
d2f9356 🐛 fix(ci): isolate gitea workflow repos
588b81d 🐛 fix(ci): inline gitea workflow bootstrap
e0b1c3a ♻️ refactor(skills): standardize first-party skill contracts
2c5050d ♻️ refactor(skills): rename repo skills source dir
f049dfb 📦 deps(skills): drop duplicate first-party superpowers skills
234b335 ✨ feat(workflow): add superpowers planning and execution state tracking
c1702a6 📝 docs(markdown): format tracked markdown and drop stale templates
2325409 📝 docs(markdown): clarify optional markdownlint usage
214c44e 🔧 chore(markdown): add markdownlint baseline and lint fixes
a22b324 📝 docs(templates): add execution and memory-bank prompt templates
223a797 📝 docs(templates): update README for Claude Code and current features
4ac8672 📝 docs: simplify README + platform-agnostic tools + auto-create local rules
2431c9d 📝 docs: add claude_md config and use cross-platform paths
d64b248 📝 docs: fix README.md inaccuracies and add Claude Code info
c8d6bf2 🐛 fix(playbook): use relative paths in CLAUDE.md when not at project root
6518f0f ✨ feat(playbook): auto-create CLAUDE.md with path discovery
6ec9a45 ✨ feat(skills): add skill_link symlink support + platform-agnostic prompt
9f8b6b5 📝 docs: update README and config example for Claude Code support
79cff6c 📝 docs(skills): add Claude Code platform support
452c6f5 ✨ feat(playbook): auto-inject AGENTS.md into CLAUDE.md
e1dbf3c 🐛 fix(skills): remove dual-path from commit-message skill
f3a7259 🔧 chore(ci): use prepare_repo.sh in both workflows
da08212 🔧 chore(ci): extract prepare_repo.sh and clean up workflows
7ade85e 🗑️ remove(tsl): drop syntax_book/, data/ source and build script
f94dba0 ♻️ refactor(skills): update playbook.py and tests for thirdparty/ layout
b3df412 ♻️ refactor(skills): separate thirdparty skills into thirdparty/ subdirectory
64950e7 📦 deps(skills): sync thirdparty skills
a2e3cb0 ✨ feat(playbook): add no_backup deploy controls
8609d59 🐛 fix(docs): repair reference catalog source links
956da11 🐛 fix(playbook): publish hidden ci test fixes
3f67754 📦 deps(skills): sync thirdparty skills
08ca87b 📦 deps(skills): add karpathy thirdparty sync
96b705b 📝 docs(tsl): rebuild canonical syntax and routing manual
3ed5052 📦 deps(skills): sync thirdparty skills
60108dd 📦 deps(skills): sync thirdparty skills
da85d4e 🐛 fix(thirdparty): prune nested project snapshots
a2a697e 📦 deps(skills): sync thirdparty skills
9df610a 🐛 fix(thirdparty): exclude duplicated superpowers skills
33dd5bb 🐛 fix(thirdparty): preserve optional manifest fields
91b0ea7 🐛 fix(thirdparty): preserve manifest during snapshot update
2e26f98 🔧 chore(thirdparty): generalize skills sync pipeline
5b9c1e3 📦 deps(skills): sync superpowers
2f2d34a 📝 docs(readme): normalize subtree command spacing
62db7db 🐛 fix(ci): serialize superpowers update and sync
3463223 🐛 fix(ci): use literal superpowers sync paths
48f6de8 📦 deps(skills): sync superpowers
4b23529 🔧 chore(ci): merge superpowers update and sync workflow
a56d75b 📦 deps(skills): sync superpowers
84bcefa 🔧 chore(ci): use ci[bot] commit author name
00a07e5 📦 deps(skills): sync superpowers
7b84daf 🐛 fix(templates): enforce main loop progress tracking
51373d7 🔧 chore(ci): automate superpowers sync workflow
eaaa39c 🐛 fix(ci): prevent stale superpowers sync from restoring skills block
79755c6 📦 deps(skills): sync superpowers
836d878 📦 deps(skills): sync superpowers
8216c9f 📦 deps(skills): sync superpowers
9439505 🐛 fix(playbook): address reported repo issues

git-subtree-dir: docs/standards/playbook
git-subtree-split: 25d895d8b3f56624ccfe99ad7289e9eb49e0f316
This commit is contained in:
csh
2026-05-24 13:04:14 +08:00
parent 35e6a301aa
commit 3d83740f88
292 changed files with 30774 additions and 218828 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/thirdparty/ui-ux-pro-max/data/landing.csv
Vendored
+35
View File
@@ -0,0 +1,35 @@
No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
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.
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.
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.
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.
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.
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, 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.
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.
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.
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.
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, 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."
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, 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."
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."
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."
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."
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."
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."
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."
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."
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."
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."
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.