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 valueUsageBackground#050810Replace with your dark basePage backgroundBrand accent#f97316 (orange)Your primary brand colorCTAs, active states, linksGlow 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 radial glowGlass surfacergba(255,255,255,0.05)Keep as-isCards, header, modalsBorderrgba(255,255,255,0.07–0.14)Keep as-isCard edges

Rule: The background should feel like deep space — almost black, with faint atmospheric color. Glows should be subtle (opacity 0.08–0.15), never loud.

Background Composition#

Layer these radial gradients on the root element for depth. Swap the RGBA colors to match your brand:

css

background:
  radial-gradient(ellipse at 8%  50%, <left-glow-color>  0%, transparent 55%),
  radial-gradient(ellipse at 92% 8%,  <right-glow-color> 0%, transparent 50%),
  radial-gradient(ellipse at 50% 100%, <bottom-glow-color> 0%, transparent 50%),
  <base-background>;

Add .dot-grid class for the subtle background dot pattern.

Typography#

text

Display font: Sora (Google Fonts) — headings, brand name
Body font:    DM Sans (Google Fonts) — body copy, UI labels
Mono font:    JetBrains Mono — terminal, code blocks, step numbers

next/font setup:

ts

import { Sora, DM_Sans, JetBrains_Mono } from 'next/font/google'
export const fontDisplay = Sora({ subsets: ['latin'], variable: '--font-display', weight: ['400','600','700','800','900'] })
export const fontSans    = DM_Sans({ subsets: ['latin'], variable: '--font-sans' })
export const fontMono    = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })

Tailwind config:

js

fontFamily: {
  display: ['var(--font-display)', 'sans-serif'],
  sans:    ['var(--font-sans)',    'sans-serif'],
  mono:    ['var(--font-mono)',    'monospace'],
}

Glass Utility Classes#

See resources/design-tokens.css for the full set. Key classes:

• .glass — card surfaces, header, modals
• .glass-raised — elevated cards (hover state, modals)
• .dot-grid — background dot pattern overlay
• .gradient-border — brand-accent-to-complementary gradient border on hover (update colors in design-tokens.css to match your palette)
• .card-dark / .card-dark-solid — opaque dark cards for dashboards
• .text-shimmer — animated gradient text
• .marquee-track — infinite horizontal scroll
• .cursor-blink — terminal cursor blink

Tailwind Animation Tokens#

Add to tailwind.config.js:

js

animation: {
  'fade-up':      'fade-up 0.6s ease both',
  'logo-breathe': 'logo-breathe 3.5s ease-in-out infinite',
  'pulse-glow':   'pulse-glow 2.5s ease-in-out infinite',
},
keyframes: {
  'fade-up':      { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
  'logo-breathe': { '0%,100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.06)' } },
  'pulse-glow':   { '0%,100%': { boxShadow: '0 0 20px <brand-accent-rgba-0.3>' }, '50%': { boxShadow: '0 0 35px <brand-accent-rgba-0.55>' } },
},

Component Library#

Drop-in components in resources/:

ComponentFilePurposeCursorGlow``cursor-glow.tsxMouse-tracking brand-color radial gradient overlay (update color to match brand accent)ScrollProgress``scroll-progress.tsxRight-edge scroll depth indicator barScrollReveal``scroll-reveal.tsxFramer Motion fade-in-up on scroll (any direction)Marquee``marquee.tsxInfinite horizontal scroll — use for platforms, client logos, features, integrations, anything that benefits from a "wall of proof"TerminalSteps``terminal-steps.tsxAnimated dark terminal — use for the Agitate section: list the painful steps the user has to take without your product

Install dependency:

bash

npm install framer-motion

Hero Section Structure#

text

[Sticky glass header — logo + nav]
[Hero — min-h-[90vh] flex items-center]
  [grid lg:grid-cols-[3fr_2fr]]
    [Left: badge → headline (variable font sizes) → subhead → CTA row]
    [Right: glass card mockup of product UI]
[Platform/logo marquee strip — fades at edges]

Hero stagger: Sequenced animation-delay on each element:

tsx

<div className="animate-fade-up opacity-0"                  >[badge]</div>
<div className="animate-fade-up opacity-0 [animation-delay:80ms]" >[headline]</div>
<div className="animate-fade-up opacity-0 [animation-delay:160ms]">[subhead]</div>
<div className="animate-fade-up opacity-0 [animation-delay:240ms]">[CTAs]</div>

Section Rhythm#

Every major section:

1. Wrap in <ScrollReveal> for on-scroll entry
2. Section label: text-[brand-accent]/70 text-sm font-semibold uppercase tracking-widest (use your brand accent color, e.g. text-orange-400/70, text-blue-400/70)
3. Section headline: font-display text-4xl md:text-5xl font-black text-white
4. Subtext: text-white/60 text-lg max-w-2xl
5. Card surfaces: glass rounded-2xl p-6

---

Pillar 3 — Mobile / Responsive Hardening#

The Non-Negotiables#

1. Viewport meta — must be in <head>:

html

<meta name="viewport" content="width=device-width, initial-scale=1">

2. iOS Safari auto-zoom prevention Any input/select/textarea with font-size < 16px triggers iOS auto-zoom on focus. Fix:

css

input, select, textarea { font-size: 16px; }

In Tailwind: always use text-base or larger on form elements.

3. Horizontal overflow Belt-and-suspenders approach — CSS alone isn't always sufficient:

css

html, body { overflow-x: hidden; max-width: 100vw; }

Also add overflow-hidden on root page wrapper and min-w-0 on flex/grid children.

4. Wide tables and comparison grids

tsx

<div className="overflow-x-auto -mx-4 px-4">
  <table className="min-w-[640px] w-full">...</table>
</div>

5. Grid children can overflow CSS Grid children can push past their column. Always add min-w-0:

tsx

<div className="grid lg:grid-cols-2">
  <div className="min-w-0">...</div>
  <div className="min-w-0">...</div>
</div>

Responsive Typography Scale#

Always mobile-first:

ElementMobileTabletDesktopHero headlinetext-4xl``md:text-6xl``lg:text-7xlSection headlinetext-3xl``md:text-4xl``lg:text-5xlBodytext-base——

Never write text-7xl without a mobile fallback.

Touch Targets#

Minimum 44×44px on all interactive elements:

tsx

className="min-h-[44px] min-w-[44px]"

Dashboard Sidebar Navigation#

• Desktop: Fixed sidebar w-60 hidden lg:flex flex-col fixed inset-y-0 left-0
• Mobile: Hamburger button → full-height off-canvas drawer
• Active state: border-l-2 border-[brand] text-[brand-light] bg-[brand]/10 — use your brand accent color
• Never show both sidebar and hamburger simultaneously — use lg:hidden / hidden lg:flex
• Main content area: add lg:pl-60 to offset for the fixed sidebar

backdrop-filter Support#

Always include both prefixed and unprefixed versions:

css

backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);

Animation — Respecting prefers-reduced-motion#

In CSS:

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

---

Workflow: How to Apply This Skill#

Step 1 — Copy audit#

1. Read every section of the existing page
2. Identify: Is PAS present? Is the headline under 10 words? Is the copy speaking to the customer's frustration or just describing features?
3. Rewrite each section with PAS + audience framing (adapt to the specific product's customer — non-technical business owner, busy professional, time-poor freelancer, whatever applies)
4. Do the fewer-words pass: cut 30–40%, preserve 100% of message
5. Verify: comparison table includes your product column; guarantee is present before final CTA

Step 2 — Visual transformation#

1. Apply design tokens: dark background, brand accent color, glass surfaces (see design-tokens.css) — swap orange values to your brand color
2. Add fonts (Sora + DM Sans) via next/font — or substitute display/body fonts that match the brand tone
3. Add CursorGlow (update accent color) and ScrollProgress to root layout
4. Wrap each major section in <ScrollReveal>
5. Add a Marquee strip after hero — populate with platforms, logos, integrations, or social proof that fits the product
6. Add TerminalSteps to the Agitate section — list the painful steps without the product
7. Apply hero stagger ( animation-delay) to entry elements

Step 3 — Mobile hardening#

1. Test at 375px viewport width
2. Fix: min-w-0 on all grid children
3. Fix: wrap wide tables in overflow-x-auto container
4. Fix: iOS input font-size ≥ 16px
5. Fix: confirm no horizontal scroll at any breakpoint
6. Fix: sidebar uses hamburger on mobile, fixed panel on desktop

---

Customisation Reference#

ThingWhereNames/logos in marqueeitems prop on <Marquee> in marquee.tsxTerminal steps copySTEPS array in terminal-steps.tsxComparison table rowscomparisonRows in your page componentRadial gradient accent colorsBackground style on root <div>Brand accent colorReplace orange-500 / #f97316 globallyGuarantee copyJust before final CTA sectionScroll animation directiondirection prop on <ScrollReveal>