Landing Page Patterns

Section Types

Hero Section

The first thing visitors see. Must communicate value instantly.

Components:

• Headline (benefit-focused, not feature-focused)
• Subheadline (supporting detail)
• Primary CTA button
• Optional: secondary CTA, hero image/video, social proof snippet

Layout Options:

• Centered text with image below
• Split: text left, image/video right
• Full-width background image with overlay text
• Animated gradient background

Best Practices:

• Headline < 10 words
• CTA uses action verb ("Get Started", "Try Free", "Join Waitlist")
• Above-the-fold content loads instantly (no lazy images)

Features Section

Showcase what makes the product/service valuable.

Layouts:

• 3-column grid with icons
• 2-column alternating (image left/right)
• Single column with large icons
• Bento grid (mixed sizes)

Each Feature Card:

• Icon (emoji, CSS icon, or hosted image)
• Title (short, benefit-oriented)
• Description (1-2 sentences max)

Social Proof Section

Build trust through others' experiences.

Types:

• Testimonial cards with photo, name, title
• Logo bar of client companies
• Star ratings with review count
• "As seen in" media logos
• Stats/numbers ("10,000+ users", "4.9/5 rating")

Carousel Pattern (CSS-only):

.testimonials {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.testimonial-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

Pricing Section

Clear, scannable pricing options.

Best Practices:

• Highlight recommended plan
• Use contrast to draw eye to best value
• List features with checkmarks
• Show savings for annual billing
• CTA on each plan card

FAQ Section

Answer objections before they become blockers.

Accordion Pattern (CSS-only):

details summary {
  cursor: pointer;
  padding: 1rem;
  font-weight: 600;
}
details[open] summary {
  border-bottom: 1px solid var(--border);
}
details > div {
  padding: 1rem;
}

CTA Section

Final push before footer.

Components:

• Compelling headline (urgency or value)
• Single, prominent CTA button
• Optional: secondary link, trust badges

Styles:

• Contrasting background color
• Gradient or pattern background
• Full-width with centered content

Footer

Navigation, legal, social links.

Include:

• Logo
• Navigation links (grouped by category)
• Social media icons
• Copyright
• Privacy/Terms links

Navigation Patterns

Sticky Header

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
}

Smooth Scroll

html {
  scroll-behavior: smooth;
}

<a href="#features">Features</a>
<!-- ... -->
<section id="features">...</section>

Mobile Menu (CSS-only)

.mobile-menu {
  display: none;
}
@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
  .desktop-nav {
    display: none;
  }
}

Visual Patterns

Gradient Backgrounds

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Glass Morphism

background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);

Subtle Patterns

background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.1) 1px, transparent 0);
background-size: 20px 20px;

Animated Gradients

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

Typography Hierarchy

h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; }
p { font-size: 1.125rem; line-height: 1.7; }

Responsive Breakpoints

/* Mobile first */
.container { padding: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Form Patterns

Email Signup (mailto fallback)

<form action="mailto:you@example.com" method="post" enctype="text/plain">
  <input type="email" name="email" placeholder="Enter your email" required>
  <button type="submit">Join Waitlist</button>
</form>

External Form Service

<form action="https://formspree.io/f/yourformid" method="POST">
  <input type="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

Animation Patterns

Fade In on Scroll (CSS-only with IntersectionObserver)

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

Staggered Entrance

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

Hover Lift

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}