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 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. Use when: user asks to improve landing page, rewrite copy, make site look premium, fix mobile layout, add animations, dark theme, liquid glass, scroll effects, high-converting copy.

Flacko2048@flacko2048

Install

openclaw skills install @flacko2048/million-dollar-landing-page

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:

Copy — rewrite using PAS formula → tighten with "fewer words" pass
Visual — dark glass design system, motion, micro-interactions
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:

Your product must be in the table — compare yourself to the raw alternatives (DIY, competitors, doing nothing) to show you solve the whole problem
Choose comparisons that make your weaknesses irrelevant and your strengths undeniable
Every row where alternatives fail, you win — don't add rows where the answer is ambiguous
Keep it to 6–8 rows max
Include at least one row on time and one on price — these are universally compelling
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:

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:

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:

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:

Wrap in <ScrollReveal> for on-scroll entry
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)
Section headline: font-display text-4xl md:text-5xl font-black text-white
Subtext: text-white/60 text-lg max-w-2xl
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:

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:

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

Read every section of the existing page
Identify: Is PAS present? Is the headline under 10 words? Is the copy speaking to the customer's frustration or just describing features?
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)
Do the fewer-words pass: cut 30–40%, preserve 100% of message
Verify: comparison table includes your product column; guarantee is present before final CTA

Step 2 — Visual transformation

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

Step 3 — Mobile hardening

Test at 375px viewport width
Fix: min-w-0 on all grid children
Fix: wrap wide tables in overflow-x-auto container
Fix: iOS input font-size ≥ 16px
Fix: confirm no horizontal scroll at any breakpoint
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>`

One-shot perfect landing page

Install

Million Dollar Landing Page

What This Skill Does

Pillar 1 — Copy Transformation

Framework: Problem-Agitate-Solve (PAS)

Problem

Agitate

Solve

Headlines

The Fewer-Words Rule

Guarantee Section

Comparison Table Rules

Audience Framing

Pillar 2 — Visual Design System

Color Palette

Background Composition

Typography

Glass Utility Classes

Tailwind Animation Tokens

Component Library

Hero Section Structure

Section Rhythm

Pillar 3 — Mobile / Responsive Hardening

The Non-Negotiables

Responsive Typography Scale

Touch Targets

Dashboard Sidebar Navigation

backdrop-filter Support

Animation — Respecting prefers-reduced-motion

Workflow: How to Apply This Skill

Step 1 — Copy audit

Step 2 — Visual transformation

Step 3 — Mobile hardening

Customisation Reference

Related skills

Animation — Respecting `prefers-reduced-motion`