Skill: flacko2048/million-dollar-landing-page (version 1.0.0)

--- name: million-dollar-landing description: > 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. allowed-tools: - Bash - Read - Write - Edit - Glob - Grep --- # 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: ```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 ``` 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/`: | 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 ``` [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: | 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 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>` |


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)