SSkilltecabyclaudinhocode
Enviar skill
← Voltar para o catálogo

million-dollar-landing

Documentos

Transform a generic SaaS landing page into a high-converting, visually premium product that makes visitors feel like they've landed on a million-dollar company. Covers three pillars: (1) copy rewrite using the Problem-Agitate-Solve formula with a "fewer words" pass, (2) full visual transformation to a dark glass design system with motion and micro-interactions, and (3) mobile/responsive hardening.

0estrelas
Ver no GitHub ↗Autor: Flacko2048

Million Dollar Landing Page

What This Skill Does

Transforms a functional-but-forgettable SaaS landing page into a site that converts. Three distinct layers, applied in order:

  1. Copy — rewrite using PAS formula → tighten with "fewer words" pass
  2. Visual — dark glass design system, motion, micro-interactions
  3. Mobile — responsive hardening, iOS gotchas, overflow fixes

Battle-tested on a production SaaS launch — every pattern here drove real conversions.


Pillar 1 — Copy Transformation

This framework applies to any product or service. The examples below span multiple industries on purpose — read the structure, not the domain.

Framework: Problem-Agitate-Solve (PAS)

Structure every page to answer two questions first:

  • What do you do? — one clear sentence, above the fold
  • Why should they care? — the cost of not using you

Then run PAS:

Problem

Walk in the customer's shoes. Identify their real struggle — not the surface complaint but the underlying frustration.

The pattern: "[Customer role] didn't start [their thing] to deal with [your problem domain]. But [the reality they face]."

Examples across industries:

  • SaaS / dev tool: "Developers didn't build their product to spend weekends firefighting infrastructure. But every new integration means new servers, new config, new things to break at 3am."
  • Marketing agency: "Business owners didn't become entrepreneurs to become marketers. But without a steady stream of leads, every month is a gamble."
  • Accountant / bookkeeper: "You started your business to do the work you love — not to spend every Friday reconciling spreadsheets and dreading tax season."
  • Fitness coach: "You know you should be training consistently. But figuring out what to do, when, and why you're not seeing results is a full-time job."

Agitate

Press the wound. Make the severity real. Don't just name the problem — make them feel it.

Stack the friction. List the steps they have to take without you. Make each one land.

Examples:

  • SaaS: "You write the code. Then you provision the server. Then you debug the webhook. Then you do it again for the next platform. And the next. When something breaks at 3am, you wake up."
  • Marketing agency: "You post on social. Nothing happens. You try ads — burn $500, get 3 leads, close none. You hire a freelancer. They disappear after two weeks. Six months later you're back at square one."
  • Accountant: "You log into three different tools. Export CSVs. Reconcile them manually. Miss a deduction. Get a letter from HMRC. Pay a penalty. All for work that takes 20 minutes if you know what you're doing."

Solve

One sentence. Concrete. Fast. No jargon.

The pattern: "[Product] gives you [the outcome they want] without [the thing they hate doing]."

Examples:

  • SaaS: "cr8claw gives you 12 channels, a pre-configured model, and none of the setup — in under 2 minutes."
  • Marketing agency: "We run your entire lead generation — ads, content, follow-up — so you show up to booked calls, not empty inboxes."
  • Accountant: "We handle your books, tax returns, and HMRC correspondence. You get one clean report. Monthly."
  • Fitness coach: "You get a 12-week plan built for your body, your schedule, and your goal — with weekly check-ins so you're never guessing."

Headlines

Pattern: Action + Benefit — short, punchy, specific. One idea per headline.

Structure options:

  • [Action]. — e.g. "One-Click Deploy."
  • [What] + [Where/Who] + [How fast]. — e.g. "Your AI agent. Every platform. 30 minutes."
  • [Consequence of not acting]. — e.g. "Every day without an AI assistant is a missed opportunity, not a conversation."
  • [Outcome] + [No pain]. — e.g. "More clients. No cold outreach."

Avoid:

  • Generic: "Powerful solutions for your business"
  • Vague: "Take your [X] to the next level"
  • Feature-first: "Multi-platform bot deployment platform"
  • Adjective soup: "Fast, reliable, scalable, easy-to-use..."

The test: read it to someone. If they can't tell you what you do and why it matters in one sentence, rewrite.


The Fewer-Words Rule

After writing the copy, do a mandatory second pass:

  • Cut every word that doesn't earn its place
  • Target 30–40% word reduction while preserving 100% of the message
  • Read each sentence aloud — if it sounds like a brochure, rewrite it like a human said it

Before: "Our platform provides businesses with the tools they need to create and deploy AI-powered chatbots across multiple messaging platforms without requiring extensive technical knowledge."

After: "Deploy an AI agent on every platform your customers use. No dev work."

Before: "We offer comprehensive accounting and bookkeeping services designed to help small business owners manage their financial obligations more effectively and with less stress."

After: "We handle your books so you never think about them again."

The rule works the same for every industry. Fewer words = more trust = more conversions.


Guarantee Section

A guarantee differentiates you from competitors and eliminates purchase risk. It is the single most underused element on landing pages.

Formula: [Time/money promise] + [what they get] + [what happens if you don't deliver]

Examples:

  • SaaS: "Your bot live in 30 minutes or we'll set it up for you."
  • Marketing agency: "10 qualified leads in 60 days or you don't pay."
  • Fitness coach: "Visible results in 8 weeks or your next month is free."
  • Accountant: "Your return filed on time, every time — or we cover the penalty."

Place the guarantee immediately before the final CTA. It's the last objection remover before the click.


Comparison Table Rules

The comparison table is your most powerful sales section. Rules:

  1. Your product must be in the table — compare yourself to the raw alternatives (DIY, competitors, doing nothing) to show you solve the whole problem
  2. Choose comparisons that make your weaknesses irrelevant and your strengths undeniable
  3. Every row where alternatives fail, you win — don't add rows where the answer is ambiguous
  4. Keep it to 6–8 rows max
  5. Include at least one row on time and one on price — these are universally compelling
  6. The rows must reinforce the same message the rest of the copy is passing — no disconnects

Audience Framing

Your customer did not start their business, take up their hobby, or take on their role to deal with the problem you solve. That's the universal truth.

Every piece of copy should speak to someone who:

  • Is already convinced they have the problem (don't spend time proving it exists)
  • Is time-poor and risk-averse
  • Wants the outcome, not the process — a done-for-you result, not a toolkit

Frame the product as: "We handle [the hard thing], you get [the outcome]."

Adapt to any audience:

  • B2B SaaS → "You run your business, we handle the infrastructure."
  • Marketing → "You do the work you love, we fill your calendar."
  • Finance → "You focus on growth, we keep you compliant."
  • Health/fitness → "You show up, we handle the plan."

Pillar 2 — Visual Design System

Color Palette

This design system uses one dominant dark background + one brand accent for all CTAs and active states. The radial glows use the brand accent plus one or two complementary tones for depth. Adapt all of these to match the product's brand.

Tokencr8claw valueYour valueUsage
Background#050810Replace with your dark basePage background
Brand accent#f97316 (orange)Your primary brand colorCTAs, active states, links
Glow leftrgba(124,58,237,0.14) (purple)Complementary to your accentHero radial glow (left edge)
Glow rightrgba(249,115,22,0.11) (orange)Your brand accent, low opacityHero radial glow (right edge)
Glow bottomrgba(59,130,246,0.09) (blue)Cool contrast toneFooter/bottom r

Como adicionar

/plugin marketplace add Flacko2048/million-dollar-landing

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Comentários · Nenhum comentário

Entre para comentar. Entrar

  • Ainda não há comentários. Seja o primeiro.