/landing-page-guide-v2

name: landing-page-guide-v2
description: Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.

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