@nurix/etna 0.19.10 → 0.19.12

package/data/harnesses/code/skills/design/data/combinations/landing.csv

@@ -1,38 +0,0 @@
-id,pattern,tier,keywords,section_order,cta_placement,color_strategy,effects,conversion_notes
-1,Hero + Features + CTA,dormant-marketing,"hero, features, feature highlights, call to action, classic saas, above the fold","1. Hero (headline, subhead, visual), 2. Value proposition strip, 3. Three to five feature blocks, 4. Closing CTA band, 5. Footer",sticky nav CTA plus repeats in hero and closing band,hero on brand primary; feature blocks on muted neutral surface; closing CTA band on accent with text at 7:1 contrast,"gentle hero parallax (background layer scrolls slower than foreground), card lift on hover, fade-in on scroll","The default page shape for a straightforward product; repeat one identical CTA at top, middle, and end so a decision is possible at every scroll depth. Keep the feature count between three and five so the page stays scannable."
-2,Social-Proof-Led,dormant-marketing,"testimonials, social proof, reviews, trust, quotes, customer stories","1. Hero, 2. Problem framing, 3. Solution overview, 4. Testimonial band or carousel, 5. Final CTA",hero CTA plus a second CTA immediately after the testimonial band,hero on brand primary; testimonial band on a quiet tinted surface with muted quote text; final CTA on high-contrast accent,"carousel auto-advance with manual controls, avatar fade-in, oversized quotation-mark motif","Sequence proof before the ask: a visitor who has just read three to five named, photographed testimonials converts more willingly than one asked cold. Attribute every quote with a real name, face, and role."
-3,Demo-Video + Feature Walkthrough,dormant-marketing,"product demo, video, walkthrough, screen recording, show the product","1. Hero, 2. Centered product video or animated mockup, 3. One section per major feature, 4. Optional comparison, 5. CTA","beside or below the demo video, repeated at page end",video framed by a brand-primary surround; feature icons in a single accent role; body text in high-contrast neutral,"pulsing play affordance, per-feature reveal on scroll, callout highlights synced to the recording","Showing the real interface answers the is-this-legit question faster than copy can. Mute and autoplay the loop, keep it short, and caption it so it works without sound."
-4,Minimal Single Column,dormant-marketing,"minimal, single column, plain, focused, one CTA, whitespace","1. Headline, 2. Two-sentence description, 3. Up to three benefit bullets, 4. One CTA, 5. Slim footer","one centered oversized button, nothing competing",near-white page with dark neutral text; the single accent color is reserved for the lone CTA at 7:1 contrast,almost none; smooth scrolling and a slight CTA scale on hover,"Strip every choice except the one you want made: no nav, one column, one button. Works best when the offer is already understood and the page only needs to close."
-5,Three-Step Funnel,dormant-marketing,"funnel, steps, staged, onboarding, progressive, wizard","1. Hero, 2. Step one names the problem, 3. Step two shows the mechanism, 4. Step three presents the action, 5. Escalating CTA","small forward CTA at each step, full-weight CTA at the end","each step keyed to a distinct semantic hue (tension, transition, resolution) while the final CTA returns to brand primary","step-number count-up, progress bar filling as the visitor scrolls, smooth anchor transitions","Progressive disclosure (revealing only one idea at a time) keeps overwhelmed visitors moving, and a visible progress indicator tells them the story is finite. Each stage should end in a small commitment before the final ask."
-6,Competitor Comparison,dormant-marketing,"comparison, versus, alternative to, switching, competitor table, migration","1. Hero naming the incumbent pain, 2. Side-by-side comparison table, 3. Deep dive on differentiating rows, 4. Pricing if favorable, 5. CTA","directly under the comparison table, repeated at page bottom",your column highlighted on a tinted brand surface; competitor columns on plain neutral; affirmative marks in the success role,"row highlight on hover, sticky table header on long tables, check-mark draw-in",Built for visitors searching alternative-to and versus queries who already intend to buy something. Stay factual and verifiable; an exaggerated table destroys the trust the format is meant to borrow.
-7,Lead Magnet Capture,dormant-marketing,"lead magnet, email capture, gated content, ebook, checklist, form","1. Benefit-led headline, 2. Preview of the asset (cover, sample pages), 3. Short form, 4. Submit CTA",the form submit button is the only CTA,clean neutral page; the asset preview carries the visual weight; form fields on white with subtle borders and a brand-primary submit,"focus glow on inputs, inline validation, a clear success state after submit","Every extra form field costs signups, so ask for three or fewer and let the asset preview do the persuading. Make the exchange explicit: what they get, in return for exactly what."
-8,Pricing-First,dormant-marketing,"pricing, plans, tiers, cost, transparent pricing, plan comparison","1. Value-framing hero, 2. Three-tier plan cards, 3. Full feature-by-plan table, 4. FAQ, 5. Final CTA",one CTA per plan card plus a sticky nav CTA,recommended tier framed in brand primary with a badge; free tier on muted neutral; enterprise tier on a dark premium surface,"monthly-annual toggle with animated price change, card lift on hover, FAQ accordion",Leading with price is itself a trust signal in skeptical markets; hiding it reads as enterprise gatekeeping. Visually pre-select the middle tier and present the annual discount as the default framing.
-9,Video Background Hero,dormant-marketing,"video hero, background video, cinematic, atmosphere, motion","1. Full-bleed hero over looping video, 2. Feature overlay, 3. Benefits, 4. CTA","centered on the video overlay, repeated in the closing section",dark scrim over the footage so light headline text stays readable; CTA in a saturated accent that separates from any frame of the loop,"muted autoplay loop, text fade-up on load, parallax (foreground scrolls faster than the footage)","Motion buys attention but costs bandwidth: compress hard, serve a static poster frame on slow connections, and never attach sound. Test the CTA against every frame of the loop for contrast."
-10,Scroll Storytelling,dormant-marketing,"storytelling, narrative, chapters, scrollytelling, editorial, long form","1. Hook, 2. Chapter: the problem, 3. Chapter: the turn, 4. Chapter: the resolution, 5. Climactic CTA","quiet CTA at each chapter close, full CTA at the climax","palette shifts chapter by chapter, building saturation toward the finale where the CTA lands on the strongest accent","scroll-triggered reveals, layered parallax (layers moving at different speeds for depth), thin reading-progress bar","A narrative arc holds attention far longer than a feature list, which suits products that need explaining before they can be wanted. On mobile, collapse the choreography to simple fades or the story becomes a chore."
-11,Adaptive Personalized Landing,dormant-marketing,"personalization, dynamic content, segments, adaptive, tailored","1. Hero variant chosen per visitor segment, 2. Features reordered by inferred interest, 3. Matching proof points, 4. Segment-aware CTA",position and wording vary by segment; always exactly one primary action,"layout adapts but the color system holds constant - brand primary for identity, one accent role for every CTA variant - so variants stay recognizably one brand","content swap with soft cross-fades, no layout jump on variant load","Matching the page to the visitor (by industry, role, referrer, or campaign) lifts relevance, but it needs analytics plumbing and honest measurement. Design the default variant first; most traffic is anonymous."
-12,Waitlist / Coming Soon,dormant-marketing,"waitlist, prelaunch, coming soon, early access, launch, signup","1. Hero with launch countdown, 2. Product teaser, 3. Email capture, 4. Waitlist size or notable-names proof","email field above the fold, re-pinned as a sticky bar on scroll",dark stage-curtain surface with a single luminous accent on the countdown and the join button,"live countdown, instant field validation, small celebration state on join, one-tap share links","Prelaunch pages sell anticipation: visible momentum (a waitlist count, recognizable early members) and a concrete early-access perk beat feature descriptions. A referral mechanic that moves people up the queue turns the list into its own growth loop."
-13,Mobile App Download,dormant-marketing,"mobile app, app store, download, install, device mockup, screenshots","1. Hero with in-device mockup, 2. Screenshot carousel, 3. Icon-led feature list, 4. Ratings and reviews, 5. Store badges",both store badges visible in every section; QR code on desktop,background tuned to match the app's own chrome so screenshots feel native; star ratings in the conventional gold role,"device tilt on scroll, swipeable screenshot carousel, star fill animation","Desktop visitors cannot install, so the QR code is the real CTA there. Use genuine current screenshots and surface the aggregate rating only when it flatters."
-14,Help Center Landing,dormant-marketing,"help center, documentation, faq, support, search, self serve","1. Hero dominated by a search field, 2. Top category tiles, 3. FAQ accordion, 4. Contact escalation",search field is the primary action; human-contact CTA appears after the FAQ,reading-first neutral palette; category icons in a single brand accent; resolved and success states in the semantic green role,"search suggestions while typing, smooth accordion expand, was-this-helpful feedback controls","The page succeeds when a ticket is never filed, so instrument the search box: failed queries are a roadmap of missing content. Keep an escape hatch to a human visible or frustrated users churn silently."
-15,Immersive Interactive Experience,dormant-marketing,"immersive, interactive, webgl, experiential, guided tour, wow factor","1. Full-screen interactive scene, 2. Guided walkthrough, 3. Benefits revealed as milestones, 4. CTA at completion","at the end of the experience, with an always-visible skip for the impatient",dark theatrical field so lit interactive elements carry the focus; interface chrome kept minimal and neutral,"WebGL scene (GPU-rendered 3D in the browser), progress markers, reward moments at each milestone","Spectacle differentiates premium launches but taxes devices and patience, so budget performance carefully and always offer a skip. Ship a plain fallback page for mobile and low-power hardware."
-16,Event Registration,dormant-marketing,"event, conference, registration, agenda, speakers, tickets","1. Hero with date, venue, and countdown, 2. Speaker grid, 3. Agenda tabs, 4. Sponsor strip, 5. Register CTA","sticky register button, repeated after the speaker grid and at page end",event identity leads; countdown and deadline elements in an urgency accent; sponsor logos in restrained monochrome,"countdown timer, speaker bio on hover, tabbed agenda, early-bird deadline emphasis",Deadline pricing does the heavy lifting: an early-bird tier with a visible cutoff converts fence-sitters. Speaker credibility and last-year attendance numbers carry more weight than venue photography.
-17,Ratings-and-Reviews-Led,dormant-marketing,"reviews, ratings, stars, verified buyers, user feedback, ecommerce","1. Hero with product and aggregate score, 2. Rating distribution, 3. Filterable individual reviews, 4. Purchase CTA",buy button pinned alongside the review stream and after the summary,neutral canvas so product photography leads; stars in the conventional gold role; verified-purchase badges in the trust green role,"star fill on load, review filters by score, photo lightbox (click to enlarge in an overlay), helpful-vote buttons",Volume plus recency is the persuasive combination; a wall of dated reviews reads as decline. Showing gracious public replies to negative reviews builds more trust than hiding them.
-18,Community Join,dormant-marketing,"community, forum, members, discussion, belonging, network","1. Hero stating what members get, 2. Live topic previews, 3. Member showcase, 4. Join CTA",join button in hero and again after the member showcase,warm inviting neutrals; real member photography supplies the color; activity indicators in the live green role,"scrolling activity feed, avatar cluster animation, topic preview on hover","Nobody joins an empty room: lead with proof of life such as members online now, posts today, and recognizable names. Let visitors read a little real content before the gate."
-19,Before-After Transformation,dormant-marketing,"before after, transformation, results, proof, outcome, slider","1. Hero showing the before state, 2. Draggable before-after comparison, 3. Mechanism explanation, 4. Results CTA","immediately after the comparison reveal, repeated at page end","the before side rendered desaturated and flat, the after side in full brand vibrancy; outcome metrics in the success role","draggable divider between the two states, count-up result numbers, short customer result clips","One honest visual transformation outsells paragraphs of claims, provided the examples are real and the metrics specific. Pair the reveal with a risk-reverser such as a guarantee, since dramatic claims raise skepticism as fast as interest."
-20,Marketplace / Directory,dormant-marketing,"marketplace, directory, listings, search, two sided, browse","1. Hero built around the search bar, 2. Category tiles, 3. Featured listings, 4. Trust and safety, 5. Supply-side CTA",the search bar is the demand-side CTA; a become-a-seller link rides the nav,high-contrast search field on a calm neutral field; category tiles carry the imagery; trust markers in the safety blue-green role,"search suggestions, listing card carousel, map pins on hover where geography matters","A marketplace landing converts by getting the visitor into results in one action, so preload popular searches and categories. Supply and demand need different pitches; give the seller path its own quiet entry point."
-21,Newsletter Signup,dormant-marketing,"newsletter, subscribe, email list, writing, content, indie","1. Hero with promise plus inline email field, 2. Recent issue archive, 3. Subscriber-count proof, 4. About the author","single email field inline in the hero, repeated in a slim sticky header",paper-like reading surface; typographic hierarchy over decoration; one accent reserved for the subscribe action,restrained motion; subtle text fade-ins and a satisfying subscribed confirmation,"One field, one promise: say what arrives, how often, and show a real past issue so the subscription is a known quantity. A concrete subscriber count works as proof once it is impressive; hide it until then."
-22,Webinar Registration,dormant-marketing,"webinar, live session, training, registration, seats, replay","1. Hero with topic, time, and form, 2. What attendees will learn, 3. Presenter credentials, 4. Bonuses and urgency, 5. Repeated form","registration form beside the hero copy, anchored again at page bottom",professional base palette with a distinct urgency accent confined to seat counts and deadlines; form on crisp white,"session countdown, live badge, presenter headshot treatment","Detect and display the visitor's own timezone; a mis-timed calendar entry is a lost attendee. Concrete takeaways outperform topic descriptions, and a replay promise lifts registrations without hurting attendance much."
-23,Enterprise Solutions Gateway,dormant-marketing,"enterprise, solutions, industries, portal, b2b, routing","1. Mission-level hero, 2. Solutions by industry, 3. Solutions by role, 4. Client logo wall, 5. Contact sales",contact-sales primary in nav and footer; login tucked secondary,conservative navy-and-neutral authority palette; accents used sparingly and only on the sales CTA,"slow ambient hero video, logo carousel, tabbed industry switcher","This page is a router, not a closer: its job is to move each visitor into the right industry or role path quickly. Buying committees visit repeatedly, so self-qualification paths beat a single hard sell."
-24,Portfolio Grid,dormant-marketing,"portfolio, gallery, work samples, masonry, creative, showcase","1. Name-and-role hero, 2. Project grid, 3. Approach or philosophy, 4. Contact",per-project hover reveal plus a contact CTA in the footer,gallery-neutral background so the work supplies all color; text in plain black or white; accent barely present,"masonry grid (columns of unequal heights packed tight), lazy-load image reveal, lightbox viewing (full-screen overlay)","The work is the argument; every design choice should defer to it, and image weight should be ruthlessly optimized because slow galleries lose viewers. Category filters help a prospect find the one relevant project fast."
-25,Horizontal Scroll Journey,dormant-marketing,"horizontal scroll, panoramic, journey, sideways, gallery, cinematic","1. Vertical intro, 2. Horizontal traveling sequence, 3. Detail stop, 4. Vertical outro with footer","floating persistent CTA, or docked at the end of the horizontal track",palette glides continuously across the track so each panel inherits from the last; progress indicator in plain high-contrast neutral,"scroll remap (vertical wheel drives horizontal travel), layered parallax (depth from layers at different speeds), track progress indicator","The sideways format is memorable precisely because it breaks convention, which is also its risk: keep navigation and escape visible at all times. Reserve it for visual products worth a guided walk."
-26,Bento Grid Showcase,dormant-marketing,"bento grid, modular tiles, feature mosaic, dense showcase, apple style","1. Hero, 2. Bento grid (mosaic of unequal feature tiles), 3. Expanded detail cards, 4. Specifications, 5. CTA",floating action button or a CTA tile inside the grid,tiles on soft neutral or frosted-glass surfaces; each tile granted one vivid accent; text in high-contrast dark neutral,"slight tile scale on hover, looping video inside key tiles, staggered tile entrance","The mosaic shows breadth at a glance without a wall of text, suiting products with many small selling points. Give every tile exactly one message and let the grid collapse to a single column on mobile."
-27,3D Product Configurator,dormant-marketing,"configurator, 3d, customizer, build your own, materials, ecommerce","1. Hero embedding the configurator, 2. Feature callouts synced to the camera, 3. Price and specification summary, 4. Purchase",add-to-cart inside the configurator plus a sticky summary bar,neutral studio backdrop so configured materials read true; interface chrome minimal; price and CTA in brand primary,"real-time 3D rendering, drag to orbit, material swap transitions, live price update","Configuring builds a sense of ownership before purchase, and a 360-degree view answers fit-and-finish doubts that drive returns. Keep the configured state attached through checkout; losing it is a rage-quit."
-28,Generative Try-It Hero,dormant-marketing,"ai, prompt input, try before signup, generative, playground, instant value","1. Hero that is itself a working prompt input, 2. Live generated result, 3. How it works, 4. Value framing and CTA",the input field is the CTA; signup asked only after the first result,dark technical field with luminous accents on the input and generation states; results shown on a clean light canvas,"typed placeholder cycling example prompts, generation shimmer while output streams, result morph-in",Letting the visitor try the model before any signup is the strongest proof an AI product can offer; the first delightful output is the conversion moment. Rate-limit anonymous use rather than gating it entirely.
-29,Feature-Grid Depth Showcase,dormant-marketing,"feature grid, breadth, capabilities, use cases, power users, parity","1. Value-prop hero, 2. Four-to-six-card feature grid, 3. Use-case sections, 4. Logo or proof strip, 5. CTA","hero, after the feature grid, and a final band",brand primary in the hero; grid cards on muted neutral surfaces with accent icons; proof strip in quiet monochrome,"card hover lift, scroll-staggered grid entrance, small icon micro-interactions","Built for evaluators running a feature-checklist comparison: breadth is the pitch, so the grid should read completely in one screenful. One card, one capability, one plain-language line."
-30,Hero-Dominant Minimal,dormant-marketing,"hero first, single message, big type, visual impact, one screen","1. Full-bleed hero owning most of the first screen, 2. One-line value strip, 3. Single proof point, 4. Primary CTA",dominant in-hero CTA echoed by a small sticky nav button,"one high-impact hero treatment (image, gradient, or flat brand field); every other element neutral; CTA at 7:1 contrast against whatever it sits on","restrained hero motion or slow zoom, CTA emphasis as the user scrolls, minimal page chrome",Bets the page on one image and one sentence; right when the product is instantly graspable or the brand itself is the story. Everything below the hero exists only to catch those who did not click.
-31,Trust-and-Authority Conversion,dormant-marketing,"trust, credibility, security, compliance, case studies, b2b proof","1. Credibility-led hero, 2. Proof wall (logos, certifications, hard numbers), 3. Solution overview, 4. Low-friction sales CTA",contact or quote CTA in nav and after the proof wall,sober navy-and-grey institutional palette; certification marks shown unaltered; the single accent belongs to the CTA alone,"counting stat numbers, logo carousel, quiet testimonial strip","In high-skepticism markets, transparency converts: named customers, real compliance marks, published pricing, and a short form. Every additional claim without evidence lowers, not raises, credibility."
-32,Live-Operations Proof,dormant-marketing,"real time, live data, status, dashboard preview, monitoring, ops","1. Hero with a live or simulated product feed, 2. Key metric strip, 3. How it works, 4. Trial or contact CTA",nav CTA plus one directly under the metric strip,"dark console-style surface; semantic status roles (healthy green, warning amber, critical red) do the visual talking; CTA in brand accent","scrolling data ticker, status dot pulse, otherwise decoration-free","Ops and security buyers trust what looks like the tool at work, so a moving (even simulated) feed beats a static screenshot; label simulations honestly. A sandbox or read-only demo environment is the natural next step."
-33,Interactive Walkthrough Embed,dormant-marketing,"interactive demo, product tour, clickable walkthrough, embed, try it, plg","1. Hero with embedded clickable product tour, 2. Feature highlights drawn from tour steps, 3. Proof, 4. Signup CTA",inside the tour's final step plus a standing hero CTA,the embedded product supplies the color; the page around it stays neutral; tour hotspots in one consistent accent role,"guided hotspot pulses, step progress dots, optional lead-capture step mid-tour","An embedded self-driven tour (a clickable capture of the real product, in the style of Arcade or Navattic) lets visitors qualify themselves before any form. By the mid-2020s this became the expected pattern for SaaS and AI tools; pages without a try-it path convert noticeably worse."
-34,Developer-First Install Hero,dormant-marketing,"developer tool, install command, copy paste, docs, open source, api","1. Centered headline over a copyable install command or code sample, 2. Terminal or code walkthrough, 3. Docs and quickstart links, 4. Community and open-source proof, 5. Dual CTA","two hero CTAs: primary start-building or signup, secondary straight to docs or GitHub",dark editor-theme canvas with syntax-highlight accent roles; the copy button on the install command is the brightest element on the page,"one-click copy with confirmation, typing animation in the terminal sample, live GitHub star count","Developers convert by running the thing, so the copyable install command is the true CTA, and generic sign-up wording underperforms specific verbs like start building. Always pair the commercial CTA with a free path to docs or source; it is the credibility half of the pitch."
-35,Benchmark-Led AI Landing,dormant-marketing,"ai model, benchmarks, evals, leaderboard, performance table, launch","1. Hero with the headline capability claim, 2. Benchmark table versus named rivals, 3. Interactive or recorded sample outputs, 4. API pricing, 5. Access CTA",get-access CTA after the benchmark table and again after samples,"research-paper neutrality: light canvas, dense readable tables, your row highlighted on a tinted brand surface, rival rows plain","animated bar comparisons, table row highlight, expandable methodology notes","AI-model launches are judged like papers: a benchmark table with named competitors and linked methodology is the proof section, and the samples must back the numbers. Cherry-picked evals get called out publicly within hours, so include the losses."
-36,Free-Tool-Led Landing,dormant-marketing,"free tool, calculator, generator, engineering as marketing, utility, seo","1. Hero that is the working tool, 2. Instant result display, 3. Soft pitch connecting tool to product, 4. Email or signup CTA to save results",the tool's action button leads; the product CTA appears with the result,tool interface on a focused card against a calm neutral page; result states in semantic roles; product upsell visually subordinate,"instant in-page results without reload, shareable result cards, gentle reveal of the upsell","A genuinely useful free utility earns search traffic and goodwill that ads cannot buy, and asking for an email only to save or send results feels fair rather than extractive. The tool must stand alone; a crippled teaser poisons the goodwill."
-37,Conversational Onboarding Landing,dormant-marketing,"chat first, conversational, ai agent, talk to the product, assistant, guided intake","1. Hero with an open chat or voice input, 2. Suggested starter questions, 3. Capability highlights, 4. Signup CTA carried inside the conversation",the chat input is primary; the agent itself proposes signup at the moment of demonstrated value,"calm neutral field with the conversation panel as the lit focal surface; agent and user turns distinguished by surface tone, not loud color","streaming reply text, typing indicator, suggestion chips that fill the input","For agent products, talking to the agent is the demo; canned starter prompts stop the blank-box freeze. Log the questions asked - it is the sharpest voice-of-customer feed the team will get - and offer a plain non-chat path for skeptics."