landing-page-guide-v2

What this skill does

# Landing Page Guide V2

## Overview

This skill enables creation of **distinctive, high-converting landing pages** that combine:
- **Proven Conversion Framework**: 11 essential elements from DESIGNNAS for high conversion rates
- **Exceptional Design Quality**: Bold aesthetic choices that create unforgettable brand experiences
- **Production-Ready Code**: Next.js 14+ with ShadCN UI, TypeScript, and performance optimization

**Philosophy**: A landing page must convert visitors AND make them remember your brand. Generic, template-looking pages fail at both. This skill ensures your landing pages are functionally effective and visually extraordinary.

## When to Use This Skill

Use this skill when users request:
- Creation of landing pages, marketing pages, or product pages
- Next.js or React-based promotional websites
- Pages that need to convert visitors into customers AND stand out visually
- Professional marketing pages with exceptional design quality
- Landing pages that avoid generic "template" aesthetics
- Brand experiences that are both conversion-optimized and memorable

## Design Thinking: Before You Code

Before implementing any landing page, commit to a **BOLD aesthetic direction** that aligns with the brand and product:

### 1. Understand Context
- **Purpose**: What problem does this product solve? Who is the target audience?
- **Brand Personality**: Is this brand playful, professional, luxury, minimalist, bold, technical?
- **Industry**: What visual language does this industry expect (or should we break)?
- **Differentiation**: What makes this brand unforgettable? What's the ONE thing visitors will remember?

### 2. Choose an Aesthetic Direction

Pick an extreme direction and commit fully. Examples:

**Minimalist & Refined**
- Brutally clean layouts, generous whitespace
- Sophisticated typography with large scale contrasts
- Monochromatic or limited color palette (2-3 colors max)
- Subtle micro-interactions, elegant transitions
- Examples: Luxury products, professional services, premium SaaS

**Bold & Maximalist**
- Rich, complex visual layers
- Dynamic animations and scroll effects
- Gradient meshes, textures, and overlapping elements
- Vibrant color palettes with high contrast
- Examples: Creative agencies, entertainment, youth brands

**Retro-Futuristic**
- Nostalgic elements with modern execution
- Geometric patterns, neon accents
- Glitch effects, scanlines, grain textures
- Monospace or display fonts with character
- Examples: Gaming, tech startups, creative tools

**Organic & Natural**
- Soft, flowing shapes and gradients
- Nature-inspired colors (earth tones, pastels)
- Smooth animations mimicking natural motion
- Rounded corners, soft shadows
- Examples: Wellness, sustainability, food

**Editorial & Magazine**
- Strong typographic hierarchy
- Grid-breaking asymmetric layouts
- Large, impactful imagery
- Bold use of whitespace and negative space
- Examples: Content platforms, media, education

**Brutalist & Raw**
- Unconventional layouts, intentional "ugly"
- System fonts or deliberately basic typography
- High contrast, limited color
- Minimal or no animations
- Examples: Art, fashion, anti-establishment brands

**CRITICAL**: Choose ONE clear direction. Bold maximalism and refined minimalism both work - the key is **intentionality**, not intensity. Execute your chosen direction with precision and consistency across all 11 elements.

### 3. Define Your Design System

Before coding, define these core decisions:

**Typography Choices**
- **Display Font**: Choose something distinctive and memorable (NOT Inter, Roboto, Arial, or system fonts)
  - Consider: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  - Or use Google Fonts wisely: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  - **NEVER** converge on common choices - vary fonts across different projects
- **Body Font**: Refined, readable choice that complements display font
  - Consider: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
- **Scale**: Establish clear hierarchy (e.g., H1: 4rem → H2: 3rem → H3: 2rem → Body: 1rem)

**Color Palette**
- **Dominant Color**: Your primary brand color (60% usage)
- **Accent Color**: High-contrast color for CTAs (10% usage)
- **Neutral Palette**: Grays or earth tones (30% usage)
- **Background Strategy**: Solid, gradient, texture, or pattern?
- Define as CSS variables for consistency

**Motion Strategy**
- **Page Load**: Staggered reveals with animation-delay for hero elements
- **Scroll Interactions**: Fade-ups, parallax, or scroll-triggered animations?
- **Hover States**: Subtle scale, color shift, or dramatic transformations?
- **CTA Animations**: How do buttons attract attention without being annoying?

**Spatial Approach**
- **Layout Style**: Centered and symmetric? Asymmetric and dynamic? Grid-breaking?
- **Spacing System**: Tight and dense? Generous and airy?
- **Section Flow**: Traditional stacked? Diagonal? Overlapping?

## The 11 Essential Elements Framework

Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages.

**Each element has TWO requirements:**
1. **Functional requirement** (for conversion) - Must be included
2. **Design excellence** (for memorability) - Must be distinctive and beautiful

### Element-by-Element Design Guide

#### 1. URL with Keywords
**Functional**: SEO-optimized, descriptive URL structure
**Design**: N/A (SEO-focused)

#### 2. Company Logo (Header)
**Functional**: Brand identity placed prominently (top-left)
**Design Excellence**:
- Consider animated logo on page load
- Sticky header with smooth scroll transitions
- Logo mark variation for different scroll states
- Header background: transparent → solid with backdrop blur
- Navigation typography that matches your display font choice

#### 3. SEO-Optimized Title and Subtitle (Hero)
**Functional**: Clear value proposition with keywords
**Design Excellence**:
- **Typography**: Make this MASSIVE and unforgettable (4rem-6rem+)
- Use your distinctive display font here
- Consider gradient text, outlined text, or text shadows for impact
- Animate title words with staggered fade-in (animation-delay)
- Subtitle should be 50% the size of title, different weight or font
- Add visual rhythm with line breaks and spacing

#### 4. Primary CTA (Hero)
**Functional**: Main call-to-action button in hero section
**Design Excellence**:
- Make it IMPOSSIBLE to miss: size, color contrast, position
- Avoid boring rectangles: consider pill shapes, unique borders, or geometric shapes
- Add micro-interactions: hover scale, shadow expansion, color shift
- Consider dual CTAs with primary/secondary hierarchy
- Entrance animation that draws the eye (delay after title)
- Add visual cues: arrows, icons, or pulsing effects

#### 5. Social Proof (Hero)
**Functional**: Reviews, ratings, user statistics
**Design Excellence**:
- Numbers should be HUGE and animated on load (count-up effect)
- Statistics cards with gradient backgrounds or subtle borders
- Customer avatars in overlapping circles
- Star ratings with custom styling (not default yellow stars)
- "As featured in" logos with proper spacing and opacity treatment
- Consider rotating testimonials or animated social proof carousel

#### 6. Images or Videos (Media Section)
**Functional**: Visual demonstration of product/service
**Design Excellence**:
- **CRITICAL**: Never use placeholder or generic images
- Product screenshots with device mockups (laptop/phone frames)
- Add depth: shadows, reflections, 3D tilt effects
- Consider: Floating screenshots, parallax scroll effects, video backgrounds
- Image reveal animations on scroll (fade-up, slide-in)
- For videos: Custom play button design, ambient background glow
- Grid layouts: Asymmetric, overlapping, or bento box style

#### 7. Core Benefits/Features
**Functional**: 3-6 ke