One-shot perfect landing page

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 compa...

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.

Token	cr8claw value	Your value	Usage
Background	#050810	Replace with your dark base	Page background
Brand accent	#f97316 (orange)	Your primary brand color	CTAs, active states, links
Glow left	rgba(124,58,237,0.14) (purple)	Complementary to your accent	Hero radial glow (left edge)
Glow right	rgba(249,115,22,0.11) (orange)	Your brand accent, low opacity	Hero radial glow (right edge)
Glow bottom	rgba(59,130,246,0.09) (blue)	Cool contrast tone	Footer/bottom radial glow
Glass surface	rgba(255,255,255,0.05)	Keep as-is	Cards, header, modals
Border	rgba(255,255,255,0.07–0.14)	Keep as-is	Card 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:

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

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:

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:

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:

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/:

Component	File	Purpose
CursorGlow	cursor-glow.tsx	Mouse-tracking brand-color radial gradient overlay (update color to match brand accent)
ScrollProgress	scroll-progress.tsx	Right-edge scroll depth indicator bar
ScrollReveal	scroll-reveal.tsx	Framer Motion fade-in-up on scroll (any direction)
Marquee	marquee.tsx	Infinite horizontal scroll — use for platforms, client logos, features, integrations, anything that benefits from a "wall of proof"
TerminalSteps	terminal-steps.tsx	Animated dark terminal — use for the Agitate section: list the painful steps the user has to take without your product

Install dependency:

npm install framer-motion

Hero Section Structure

[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:

<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>:

<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:

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:

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

<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:

<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:

Element	Mobile	Tablet	Desktop
Hero headline	text-4xl	md:text-6xl	lg:text-7xl
Section headline	text-3xl	md:text-4xl	lg:text-5xl
Body	text-base	—	—

Never write text-7xl without a mobile fallback.

Touch Targets

Minimum 44×44px on all interactive elements:

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:

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

Animation — Respecting prefers-reduced-motion

In 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

Thing	Where
Names/logos in marquee	items prop on <Marquee> in marquee.tsx
Terminal steps copy	STEPS array in terminal-steps.tsx
Comparison table rows	comparisonRows in your page component
Radial gradient accent colors	Background style on root <div>
Brand accent color	Replace orange-500 / #f97316 globally
Guarantee copy	Just before final CTA section
Scroll animation direction	direction prop on <ScrollReveal>