◢ Template
High-Converting Landing Page
Build one focused, self-contained landing page for a single offer, with real conversion copy, a distinctive visual identity, objection handling, and WCAG AA contrast, ready to paste into a builder or hand to a developer.
Website & Design
Why this one-shots
It one-shots because it locks a top-to-bottom message hierarchy (value-prop hero, proof strip, varied benefit sections, objection handling, closing CTA) and commits to one specific design point of view, so the page persuades instead of reading like a template with an indigo gradient.
Worksheet / Form6 fields
Proof / prompt.txt
You are a senior conversion copywriter and frontend designer who has shipped landing pages for funded startups. You write persuasive, specific copy and build pages with a real point of view, not template filler. <context> Product/offer: [product] Target audience: [target_audience] Primary call to action: [primary_cta] Key benefits (the 3-5 things that matter most to the buyer): [key_benefits] Proof points (numbers, testimonials, logos, results, guarantees you can legitimately claim): [proof_points] Likely objection or hesitation the visitor has before converting: [top_objection] </context> <task> Build a single, self-contained HTML landing page (inline CSS, inline JS if needed, no external dependencies) for this offer. Write every word of copy yourself based on the context above. Do not use lorem ipsum or bracketed placeholders in the output; if a fact is missing, write a plausible, specific-sounding version consistent with the context rather than a vague generic line. Follow this message hierarchy, top to bottom: 1. Hero: one sharp, specific value proposition headline (not a feature list, not a question, not "Welcome to X"), a one-sentence subhead that clarifies who it's for and what changes for them, and the primary CTA button. 2. Proof strip: immediately after the hero, a compact row of credibility signals from [proof_points] (metrics, logos, star rating, review count, "as seen in"), whatever fits, presented as real content, not a placeholder grid. 3. Benefits: translate [key_benefits] into outcome-focused sections. Each one names the visitor's situation, the mechanism, and the payoff in concrete terms. Vary the layout between sections (alternate image/text sides, mix a stat callout, a short list, a quote) so it does not read as a repeated icon+heading+paragraph card grid. 4. Objection handling: directly address [top_objection] and 1-2 other likely hesitations (price, effort, trust, switching cost) in a dedicated section, framed as reassurance or reframing, not a generic FAQ dump unless FAQ genuinely fits the offer. 5. Final CTA: a closing section that restates the value prop in one new sentence (do not just repeat the hero line) and repeats [primary_cta] with urgency or clarity on what happens next. 6. Footer: minimal, offer-relevant (contact, legal, one trust line). No generic sitemap filler. Only include a testimonials section, pricing section, or FAQ if the context genuinely supports it. Do not pad the page with sections that have nothing real to say. </task> <constraints> - Commit to one specific design point of view that fits the offer's tone and audience (e.g. editorial serif + cream paper texture, brutalist high-contrast mono type, warm tactile craft aesthetic, dense technical terminal-style). State the point of view to yourself in a one-line comment at the top of the CSS, then execute it consistently. - Explicitly avoid the generic AI-SaaS look: no purple/blue gradient hero, no floating dashboard/browser-chrome mockup image, no glassmorphism-by-default, no identical icon-in-a-circle card grid repeated three-plus times, no tiny uppercase letter-spaced eyebrow label over every section. - Typography: choose one display typeface pairing and use real type scale (distinct sizes for hero, section headers, body, captions), not uniform font sizing. Line length under 75 characters for body copy. - Color: pick a deliberate palette (2-3 core colors plus neutrals) that suits the offer, not a default indigo/violet SaaS palette. Every text/background pairing must meet WCAG AA contrast (4.5:1 for body text, 3:1 for large text/headlines). - Spacing: use a consistent spacing scale, generous whitespace, no cramped sections. - Fully responsive: mobile-first, test the layout mentally at 375px, 768px, and 1280px widths. Stack multi-column sections cleanly on mobile; do not just shrink desktop layout. - If you add any motion (hover states, scroll reveal, transitions), wrap it to respect `prefers-reduced-motion: reduce` and keep it subtle, never a distraction from the CTA. - The CTA button must be visually the highest-contrast, most prominent element on the page and must appear at least twice (hero and final CTA), with an optional third placement if the page is long. - Do not use em dashes anywhere in the copy. Do not use the words "seamless," "supercharge," "leverage," "elevate," "unleash," "game-changing," "cutting-edge," "effortless," or "delve." - Write real, specific copy throughout, keyed to the context given. No "Lorem ipsum," no "[Your headline here]," no generic stock phrases like "Take your business to the next level." </constraints> <output_format> Output one complete HTML file starting with `<!DOCTYPE html>`, including a `<style>` block with all CSS and, if needed, a `<script>` block for minor interactivity (mobile nav toggle, smooth scroll to CTA, reduced-motion-safe reveal). No explanation before or after the code, no markdown fences, just the raw HTML file contents ready to save and open in a browser. </output_format>
3 PAGES · 756 WORDSEXPERT-GRADE
Fill in the required fields (marked *) to enable copy.