Skip to content
UXClaim
UX Design

Million Dollar Landing

Transform landing pages into high-converting premium products using PAS copywriting, dark glass design, and mobile optimization.

View source More in UX Design

What it does

Million Dollar Landing is a design system and component library that elevates generic landing pages into polished, conversion-focused products. It combines persuasive copywriting methodology with premium visual design and rigorous mobile hardening.

How it works

The system operates on three pillars:

Copy Strategy: Uses the PAS (Problem-Agitate-Solve) formula to structure messaging that resonates with your audience. Every section follows a problem-first narrative before revealing your solution, reducing word count by 30-40% while maintaining clarity.

Visual Design: Implements a dark glass design system with layered radial gradients, backdrop blur effects, and fully customizable brand colors via CSS variables. Includes pre-built components like cursor glow tracking, scroll progress indicators, and animated reveals.

Mobile Hardening: Addresses iOS Safari quirks, prevents layout overflow, and uses mobile-first typography scaling. Includes responsive patterns for tables, forms, and navigation.

Use cases

  • B2B SaaS landing pages needing conversion optimization
  • Product launches requiring premium visual presentation
  • Redesigning dated marketing sites with modern interactions
  • Creating brand-consistent landing page templates

Who benefits

Product designers, growth marketers, and design-minded developers building Next.js applications who want production-ready landing page components without starting from scratch.

Frequently asked questions

How do I install million-dollar-landing?
Install via Claude Code skills with `npx skills add Flacko2048/million-dollar-landing`, then install framer-motion, add Google fonts to your Next.js layout, merge the design tokens CSS and Tailwind config, and copy components into your project.
What is the PAS copy formula?
PAS stands for Problem-Agitate-Solve. It's a copywriting framework where you first identify your customer's pain point, then amplify the emotional impact of that problem, then present your solution as the natural resolution.
Does million-dollar-landing work with my existing design system?
Yes. The design tokens are CSS-variable based, so you can customize brand colors (--brand-rgb) and typefaces to match your system. All components use Tailwind CSS, making them easy to integrate into existing projects.
What are the technical requirements?
You need Next.js 14+ with App Router, Tailwind CSS, and framer-motion for animations. It's designed for modern React applications and won't work in static HTML or older frameworks.
How does mobile optimization work in million-dollar-landing?
The system includes iOS Safari fixes (16px+ font sizes on inputs), CSS safeguards against overflow, mobile-first typography scaling, and responsive components like off-canvas navigation drawers and horizontally-scrollable tables.
Can I customize the animations and visual style?
Completely. All colors, animations, and delays are controlled via CSS variables and Tailwind tokens. You can adjust brand colors, animation timing, gradient intensity, and blur effects without touching component code.
What components are included?
Pre-built components include CursorGlow (mouse-tracking overlay), ScrollProgress (depth indicator), ScrollReveal (fade-in animations), Marquee (infinite scrolling strips), and TerminalSteps (animated terminal UI for process visualization).
How does million-dollar-landing improve conversion rates?
It combines persuasive copy structure (PAS formula), trust-building visual design (premium glass aesthetic), and behavioral psychology (scroll reveals, progress indicators) to guide visitors toward your CTA. The 30-40% word reduction also improves clarity.

Glossary

PAS Formula
A copywriting framework: Problem identifies the customer's pain point, Agitate amplifies the emotional impact, Solve presents your product as the resolution. Used to structure persuasive marketing copy.
Glass Design System
A visual aesthetic combining dark backgrounds with semi-transparent frosted glass surfaces (using CSS backdrop-filter blur effects), creating depth and premium appearance while maintaining readability.
CSS Variables (Custom Properties)
Reusable CSS values (like --brand-rgb) defined once and applied throughout a design system, enabling easy theming and brand customization without changing component code.
Mobile Hardening
Defensive coding practices that prevent common mobile browser issues like unintended zoom, layout overflow, and touch interaction problems. Examples: min-width constraints, font-size requirements, viewport fixes.
Scroll Reveal
A UX pattern where page elements fade in and animate upward as the user scrolls into view, creating visual interest and pacing the user's information consumption.

More in UX Design

All →
UX Design

Canvas Design

Creates beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, designs, and static pieces.

ComposioHQ
UX Design

Claude Design

AI design workspace for prototyping, design systems, and marketing collateral using Claude's vision model and conversation-to-artifact workflow.

Julpygo
UX Design

Design Thinking Skills

Claude-powered Design Thinking coach guiding teams from user research through shipped solutions with phase-by-phase methods, templates, and facilitation scri...

rastian
UX Design

Eagle Skills

Expert UX audits, product diagnostics, ad review, and AI detection for Claude Code with 65+ UX laws and anti-slop filtering.