landing-page-guide-v2

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:

Functional requirement (for conversion) - Must be included
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)

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

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 key advantages with icons Design Excellence:

Icons: Custom designed or carefully selected (NOT generic line icons)
Consider: Gradient fills, animated icons on hover, 3D-style illustrations
Card design variations: glassmorphism, neumorphism, gradient borders, subtle shadows
Staggered animation as user scrolls to this section
Asymmetric layout instead of boring 3-column grid
Background elements: subtle patterns, gradients, or decorative shapes
Typography: Feature titles in your display font, bold and prominent

8. Customer Testimonials

Functional: 4-6 authentic reviews with photos Design Excellence:

Photo treatment: Circular avatars with gradient borders or unique shapes
Card backgrounds: Subtle gradients, frosted glass, or elevated shadows
Quote marks: Oversized, decorative, or custom styled
Layout: Masonry grid, carousel, or staggered vertical
Rating stars: Custom colors matching brand palette
Hover effects: Lift up, expand, or glow
Customer names and titles: Refined typography

9. FAQ Section

Functional: 5-10 common questions with accordion UI Design Excellence:

Accordion animations: Smooth expand/collapse with easing
Icons: Custom chevrons or plus/minus signs with rotation
Hover states on questions
Typography: Questions in bold or different font weight
Consider: Two-column layout on desktop, side-by-side Q&A pairs
Background: Subtle color shift from previous section
Spacing: Generous padding inside accordion items

10. Final CTA

Functional: Bottom call-to-action for second chance conversion Design Excellence:

Make it a HERO moment: This is the last chance
Full-width section with dramatic background (gradient, pattern, or color)
CTA button even BIGGER than hero CTA
Add urgency: Countdown timers, limited spots, scarcity indicators
Surround with compelling copy and micro-benefits
Animation: Parallax background, floating elements, or scroll-triggered effects
Consider: Email input + button combo for newsletter/waitlist

Functional: Footer with complete information, legal links Design Excellence:

Multi-column layout with clear information hierarchy
Social icons: Hover effects (color shift, scale, or rotate)
Newsletter signup: Styled input with inline button
Typography: Smaller but still readable (14-16px)
Background: Darker than body or distinct color
Separator from content: Subtle gradient line or decorative divider
Bottom bar: Copyright and legal links with proper spacing

Critical: All 11 elements must be included in every landing page. No exceptions.

For detailed explanations of each element, refer to references/11-essential-elements.md.

Design Aesthetics Guidelines

Typography Excellence

NEVER use generic fonts: Inter, Roboto, Arial, Helvetica, system-ui
Display fonts should be distinctive and memorable
Pair wisely: Display font for headings + refined body font for text
Scale dramatically: Create clear hierarchy with size jumps (not subtle differences)
Letter spacing: Adjust for display fonts (often needs tighter tracking)
Line height: Display = 1.1-1.2, Body = 1.6-1.8

Color & Visual Coherence

Define CSS variables for all colors (maintain consistency)
Dominant color should appear throughout (not just CTAs)
Accent colors must have sufficient contrast for accessibility (WCAG AA minimum)
Avoid: Purple gradients on white (overused AI aesthetic)
Backgrounds: Create atmosphere with gradients, meshes, patterns, or textures
- Gradient meshes: Multi-color smooth gradients
- Noise textures: Subtle grain for depth
- Geometric patterns: Dots, lines, or shapes at low opacity
- Layered transparencies: Overlapping colored sections

Motion & Animation

Page load: One well-orchestrated entrance with staggered reveals
- Hero title words fade in sequentially (animation-delay: 0ms, 100ms, 200ms)
- Subtitle follows (delay: 300ms)
- CTA appears last (delay: 500ms) with emphasis
Scroll animations: Sections fade up as they enter viewport
- Use Intersection Observer API or Framer Motion's scroll triggers
- Cards stagger in (each with incremental delay)
Hover states: Surprise and delight
- Buttons: Scale up, shadow expand, color shift
- Cards: Lift effect with shadow
- Images: Subtle zoom or parallax
Performance: Prefer CSS animations over JavaScript
- Use transform and opacity (GPU-accelerated)
- Avoid animating width, height, top, left

Spatial Composition & Layout

Break the grid: Don't default to centered, symmetric layouts
Asymmetry: One side larger text, other side visual
Overlapping elements: Layer sections for depth
Diagonal flow: Angled dividers between sections
Generous whitespace OR controlled density (pick one and commit)
Z-axis thinking: Use shadows, blur, and layering for depth

AVOID Generic AI Aesthetics

These patterns make landing pages look "AI-generated" and forgettable:

DON'T:

❌ Inter/Roboto/Arial fonts
❌ Purple gradients on white backgrounds
❌ Perfectly centered, symmetric layouts every time
❌ Generic line icons
❌ Default yellow star ratings
❌ Boring rectangular buttons with no personality
❌ White background with no visual interest
❌ Cookie-cutter three-column feature grids
❌ Stock photos of people pointing at laptops

DO:

✅ Choose distinctive fonts that match brand personality
✅ Commit to a unique color palette (not always purple!)
✅ Create unexpected layouts with asymmetry
✅ Design or select characterful icons
✅ Custom-style all UI elements to match aesthetic
✅ Add background textures, gradients, or patterns
✅ Vary layouts across sections
✅ Use product screenshots, custom illustrations, or authentic photography

Technology Stack Requirements

When creating landing pages, always use:

Required Technologies

Next.js 14+ with App Router
TypeScript for type safety
Tailwind CSS for styling
ShadCN UI for all UI components (customize heavily!)
Framer Motion (optional) for advanced animations

ShadCN UI Components to Install

Before creating any landing page, ensure these components are installed:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest

IMPORTANT: ShadCN components are STARTING POINTS, not final designs. Customize them heavily:

Modify default styles in component files
Add custom variants in Tailwind config
Override with className props
Create wrapper components for brand-specific styling

Why ShadCN UI?

Accessibility: WCAG-compliant components (maintain this!)
Customizable: Fully customizable with Tailwind CSS (leverage this!)
Type-safe: Written in TypeScript
Performance: Copy only what you need, minimal bundle size
Ownership: You own the code, modify freely

Project Structure

Create landing pages with this structure:

Implementation Workflow

Step 1: Design First (CRITICAL)

Before writing ANY code, complete the Design Thinking section:

Understand the brand, audience, and purpose
Choose your aesthetic direction (minimalist, maximalist, retro, etc.)
Define your design system:
- Display font + body font
- Color palette (dominant, accent, neutral)
- Motion strategy (page load, scroll, hover)
- Spatial approach (layout style, spacing)

Document these decisions in comments at the top of your main component file.

Step 2: Setup Design System (CSS Variables)

Create globals.css or app.css with your design system:

Update tailwind.config.ts to use your design system:

Step 3: Setup Metadata (SEO)

Configure proper SEO metadata in layout.tsx or page.tsx:

Step 4: Create Component Structure with Design

Build components in this order, applying your aesthetic direction to each:

Header - Sticky navigation with smooth transitions
Hero - MASSIVE typography, staggered animations, bold CTA
MediaSection - Showcase with depth (shadows, 3D effects)
Benefits - Asymmetric layout, custom icons, animated on scroll
Testimonials - Unique card design, custom avatars
FAQ - Smooth accordion with custom styling
FinalCTA - Dramatic full-width section
Footer - Multi-column with refined typography

Step 5: Customize ShadCN Components

Map sections to ShadCN components and customize heavily:

Hero CTA Example:

Benefits Card Example:

Step 6: Implement Animations

Add entrance animations and scroll effects:

For scroll animations, use Intersection Observer or Framer Motion.

Step 7: Implement Responsive Design

Ensure mobile-first responsive design with brand consistency:

Use Tailwind responsive prefixes: sm:, md:, lg:, xl:
Test all breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
Minimum touch target size: 44x44px for buttons
Base font size: minimum 16px on mobile
Maintain design system across breakpoints (colors, fonts stay consistent)
Adjust layouts: Stack on mobile, side-by-side on desktop

Step 8: Optimize Performance

Use Next.js Image component for all images
Add priority prop to above-the-fold images (hero section)
Implement lazy loading for below-the-fold content
Optimize fonts: Use font-display: swap for web fonts
Use CSS animations over JavaScript when possible
Minimize bundle size: Tree-shake unused ShadCN components

Step 9: Ensure Accessibility

Use semantic HTML5 elements (<header>, <main>, <section>, <footer>)
Add ARIA labels for icon-only buttons
Ensure keyboard navigation works (test with Tab key)
Provide descriptive alt text for all images
Maintain sufficient color contrast (WCAG AA minimum: 4.5:1 for text)
Test animations for users who prefer reduced motion:

Component Examples

For complete, production-ready component implementations using ShadCN UI, refer to references/component-examples.md.

This reference file includes:

Hero section with Button, Badge, and Image optimization
Benefits section with Card components
Testimonials with Avatar and Card
FAQ with Accordion
Final CTA with Card and Button
Footer with Separator and links

Load this reference when implementing components to follow best practices.

Validation Checklist

Before completing any landing page, verify ALL items:

Design Quality ⭐

Aesthetic direction chosen and executed consistently
Typography: Distinctive display font (NOT Inter/Roboto/Arial)
Typography: Clear hierarchy with dramatic scale differences
Color palette: Defined CSS variables, cohesive throughout
Backgrounds: NOT plain white - has texture/gradient/pattern
Animations: Staggered page load, scroll-triggered reveals
Layout: Not generic centered grid - has unique composition
ShadCN customization: Components heavily customized, not default
NO generic AI aesthetics: Passes the "does this look AI-generated?" test

11 Essential Elements (Conversion) ✅

Technical Requirements 🔧

Final Polish 💎

All fonts loaded correctly (check browser DevTools)
Color contrast tested (use browser DevTools)
Tested on mobile, tablet, desktop
Keyboard navigation works
Hover states feel delightful
No Lorem Ipsum or placeholder content
Brand feels unique and memorable

Best Practices

Design-First Approach

Always start with design thinking before coding
Document your aesthetic direction in comments
Create a mood board or reference images before implementing
Don't default to "safe" choices - push creative boundaries
Remember: Conversions come from trust, and trust comes from professionalism + distinctiveness

Content Guidelines

Write clear, benefit-focused copy that matches your brand voice
Use action-oriented language in CTAs (verb + benefit)
Keep sections scannable with proper headings
Include specific numbers and statistics (builds credibility)
Use authentic testimonials with real names and photos
Match tone to aesthetic: Playful design → playful copy, Professional design → authoritative copy

Typography Best Practices

Never compromise on typography - it's 80% of design
Use display fonts at large sizes (4rem+) where they shine
Maintain consistent line heights across sections
Use font weights strategically (light for elegance, bold for impact)
Test readability on actual devices, not just dev tools
Load fonts efficiently: Only weights you actually use

Color & Visual Consistency

Define ALL colors as CSS variables upfront
Use your primary color in at least 3-4 places (not just logo)
Accent color should be high contrast and used sparingly
Test color contrast with browser DevTools or online checkers
Dark text on light backgrounds should be near-black (#1a1a1a), not pure black
Consider color psychology: Blue = trust, Green = growth, Red = urgency, Purple = creativity

Animation & Motion Guidelines

Less is more: One great page entrance > scattered micro-animations
Use animation-delay to create rhythm and flow
Respect prefers-reduced-motion - always
Test on actual devices - animations feel different on 60Hz vs 120Hz screens
Avoid animations that distract from CTAs
Use easing functions: cubic-bezier(0.4, 0, 0.2, 1) is smooth and professional

SEO Optimization

Include keywords naturally in H1, H2, and first paragraph
Use proper heading tag structure (H1 → H2 → H3), only one H1
Add descriptive alt text to all images (SEO + accessibility)
Optimize page load speed (Core Web Vitals matter)
Create compelling meta tags that encourage clicks
Schema markup for business/product info

Conversion Optimization

Primary CTA: Above the fold, impossible to miss
Final CTA: Last chance conversion, make it dramatic
Reduce friction: Minimize form fields, clear value proposition
Highlight trust signals: Reviews, testimonials, "As seen in" logos
Use contrasting colors for CTAs (should stand out)
Test CTA copy variations: "Start Free Trial" vs "Try Free for 14 Days"
Add urgency where appropriate: Limited spots, time-sensitive offers
Show human faces: Testimonials with real photos convert better

Performance Best Practices

Optimize images: WebP format, proper sizing, lazy loading
Font loading strategy: font-display: swap to avoid FOIT (Flash of Invisible Text)
Minimize JavaScript: Use CSS animations when possible
Code splitting: Dynamic imports for heavy components
Prefetch critical resources
Target: LCP < 2.5s, FID < 100ms, CLS < 0.1

Common Patterns & Aesthetic Recommendations

Each landing page type has different conversion goals AND can express unique aesthetics:

SaaS Product Landing Page

Conversion Focus: Free trial CTA, feature comparisons, pricing clarity, security badges Aesthetic Recommendations:

Minimalist & Professional: Clean layout, lots of whitespace, sophisticated typography
Tech-Forward: Gradient backgrounds, subtle animations, modern sans-serif fonts
Bold & Confident: Large typography, high-contrast CTAs, dynamic hover states Avoid: Generic blue gradients, stock photos of laptops in coffee shops

E-commerce Product Landing Page

Conversion Focus: Product images, pricing, shipping info, return policy, urgency Aesthetic Recommendations:

Luxury/Premium: Elegant serif fonts, monochrome palette, generous whitespace
Energetic/Youth: Bold colors, playful fonts, dynamic layouts, vibrant CTAs
Natural/Sustainable: Earth tones, organic shapes, soft shadows, rounded corners Avoid: Cluttered layouts, too many competing visual elements

Service/Agency Landing Page

Conversion Focus: Portfolio/case studies, process explanation, team credentials, contact form Aesthetic Recommendations:

Creative/Bold: Asymmetric layouts, unique typography, portfolio as hero
Editorial: Magazine-style layouts, large imagery, strong typographic hierarchy
Minimalist/Portfolio: Grid of work, minimal text, let work speak for itself Avoid: Generic "professional" templates, stock photography

Event/Webinar Landing Page

Conversion Focus: Date/time prominence, speaker profiles, agenda, registration form, countdown timer Aesthetic Recommendations:

Exciting/Dynamic: Animated countdown, gradient backgrounds, energetic colors
Professional/Conference: Clean layout, speaker headshots with borders, agenda timeline
Community/Friendly: Warm colors, circular avatars, social proof emphasis Avoid: Boring bullet-point agendas, generic conference aesthetics

Mobile App Landing Page

Conversion Focus: App Store badges, screenshots in device frames, feature highlights, demo video Aesthetic Recommendations:

Modern/Sleek: Device mockups with 3D tilt, floating screenshots, smooth animations
Playful/Fun: Bright colors, illustrated icons, character mascots
Screenshot-Forward: Large phone mockups as hero, minimal text, visual storytelling Avoid: Tiny screenshots, generic app icons

Resources

references/

This skill includes detailed reference documentation:

11-essential-elements.md - In-depth explanation of each of the 11 essential elements with principles, implementation tips, and examples
component-examples.md - Complete, production-ready component code using ShadCN UI for all major sections

Load these references as needed when implementing specific sections or when you need detailed guidance on any element.

Notes & Philosophy

Core Principles

Conversion + Memorability: A landing page must both convert and be memorable
Intentional Design: Every aesthetic choice should be deliberate, not default
No Generic AI Aesthetics: Avoid the "AI-generated" look that makes brands forgettable
Design System First: Define fonts, colors, motion before coding
Customize Everything: ShadCN is a starting point, not the final design

Framework Origins

11 Essential Elements based on DESIGNNAS's proven conversion framework
Design Excellence principles adapted from high-quality frontend design practices
Combined to create landing pages that are functionally effective AND visually extraordinary

Adaptation Guidelines

Adapt to specific brand guidelines and target audience
Use A/B testing to continuously improve conversion rates
Balance conversion optimization with creative expression
When in doubt, be bold - generic pages don't convert OR impress

Success Metrics

Conversion metrics:

Click-through rate on CTAs
Form submission rate
Scroll depth (are users reaching all 11 elements?)
Bounce rate and time on page

Brand metrics:

User feedback on design quality
Social sharing of the landing page
Brand recall in user surveys
Differentiation from competitors

Remember

Every landing page is an opportunity to make an unforgettable first impression. The 11 essential elements ensure conversions. Exceptional design ensures they remember your brand. Never sacrifice one for the other.

The best landing pages convert AND inspire.