/awwwards-sections

Awwwards-Tier Landing Page Sections

This skill covers EVERYTHING BELOW THE HERO. It does not govern hero sections (use awwwards-hero for that) or animations/micro-interactions (use awwwards-motion for those). It fires when the user asks for a full landing page, additional sections, feature blocks, pricing, testimonials, footers, or any below-the-fold content.

Pairing rule: When building a full landing page, run awwwards-hero for the hero, then this skill for every section below it. If motion is requested, layer awwwards-motion on top of both.

The Pipeline

┌──────────────────────────────────────────────────────────────────────────┐
│                                                                          │
│   BRIEF IN ──→ Phase 1: Page Read ──→ Phase 2: Section Sequence         │
│                  (extract page goals,    (pick sections, order them,     │
│                   audience, conversion    assign architectures)          │
│                   intent)                                                │
│                                                                          │
│                              ──→ Phase 3: Build Section by Section       │
│                                   (typography, layout, content,          │
│                                    transitions between sections)         │
│                                                                          │
│                              ──→ Phase 4: Page Composition Diff          │
│                                   (rhythm, variety, conversion flow,     │
│                                    anti-slop audit)                      │
│                                                                          │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.       │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

Phase 1: Page Read

Before choosing sections, understand the PAGE as a whole. A landing page is a persuasion sequence, not a stack of unrelated blocks.

→ Extract these page signals

→ Output a Page Read before selecting sections

"Page Read: SaaS landing for technical PMs. Conversion goal: start free trial. Objection sequence: (1) 'what does it actually do?' → feature showcase needed, (2) 'who else uses this?' → social proof needed, (3) 'what does it cost?' → pricing needed, (4) 'is the team legit?' → brief about section. Hero established: dark mode, Geist typography, muted indigo accent, cinematic center architecture. Sections must continue this palette and type system."

✓ Quality Gate: Page Read

Before moving to Phase 2, confirm:

• You know the conversion goal
• You have identified the top 3 visitor objections in order
• You understand what the hero already established (palette, typography, mood)
• You will NOT reset the design language below the fold

Phase 2: Section Sequence

Select and ORDER sections. The sequence matters more than individual section quality - a page is a narrative, not a parts bin.

→ The Persuasion Sequence Framework

Landing pages follow a conversion psychology order. Not every page needs every section, but the ORDER is non-negotiable:

HERO (handled by awwwards-hero)
  ↓
1. WHAT - Feature/Value showcase (answer "what does this do?")
  ↓
2. PROOF - Social proof, logos, testimonials (answer "who else trusts this?")
  ↓
3. HOW - Process/How-it-works (answer "how does it actually work?")
  ↓
4. RESULTS - Case studies, stats, metrics (answer "what results does it get?")
  ↓
5. PRICING - Tiers, plans, comparison (answer "what does it cost?")
  ↓
6. OBJECTION KILLER - FAQ, comparison vs alternatives (answer remaining doubts)
  ↓
7. FINAL CTA - Conversion banner (last push before they leave)
  ↓
8. FOOTER - Navigation, legal, social links

→ Section selection rules

→ Visual Rhythm Rules

These prevent the "wall of same" problem where every section looks identical:

✓ Quality Gate: Sequence

Before moving to Phase 3, confirm:

• Sections follow the persuasion sequence order
• No two adjacent sections share the same layout pattern
• Background tones alternate appropriately
• At least one visual break exists in the page
• The section count matches the content density (don't pad a simple product with 12 sections)

Phase 3: Build - Section Architectures

Each section type below has named architectures. Pick ONE architecture per section. Do not blend.

SECTION TYPE: Feature / Value Showcase

Shows WHAT the product/service does. This is the first section below the hero - it must answer the visitor's #1 question immediately.

Feature Architecture A: The Bento Grid

Best for: products with 4-6 distinct features of varying importance

An asymmetric grid where the primary feature gets 2x the space. NOT a uniform grid - one cell dominates, others support.

[section container: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [section eyebrow: small mono label, muted]
  [section heading: text-4xl lg:text-5xl, max-w-3xl, mb-16]
  [bento grid: grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6]
    [primary cell: col-span-2, row-span-2, rounded-2xl, p-8-12, bg-subtle]
      [feature visual: product screenshot or illustration, 60% of cell]
      [feature text: heading + 1-2 line description below]
    [secondary cell: rounded-2xl, p-6-8, bg-subtle]
      [icon or small visual]
      [heading + description]
    [secondary cell: ...]
    [accent cell: different bg tone or bordered, same structure]

/* BLUEPRINT: Bento grid
   WHY: auto-rows with minmax prevents cells from collapsing.
   The primary cell uses col-span-2 to dominate without explicit px widths.
   gap-4 is tight enough to feel connected, loose enough to breathe. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}
.bento-primary {
  grid-column: span 2;
  grid-row: span 2;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-primary {
    grid-column: span 1;
    grid-row: span 1;
  }
}

⚠ Drift Warning: Bento grids fail when all cells are the same size with the same padding and the same icon-heading-text pattern. ONE cell must dominate. Vary cell heights. Use different content types (visual in one, stat in another, testimonial quote in a third).

Feature Architecture B: The Stacked Showcase

Best for: products with 2-3 major features that each deserve dedicated space

Each feature gets its own full-width row with alternating layout direction. Left-right, right-left, left-right. Each row is a mini-split with a large visual on one side and text on the other.

[section container: py-24 lg:py-32, space-y-24 lg:space-y-32]
  [feature row 1: grid grid-cols-1 lg:grid-cols-2 gap-12 items-center]
    [text side: heading + description + optional bullet points]
    [visual side: product screenshot, rounded-2xl, shadow-xl]
  [feature row 2: grid grid-cols-1 lg:grid-cols-2 gap-12 items-center]
    [visual side: product screenshot] ← ORDER REVERSED
    [text side: heading + description]
  [feature row 3: repeat pattern]

⚠ Drift Warning: The alternation MUST be visual, not just CSS order. On desktop, the image physically sits on the opposite side. Use lg:order-1 / lg:order-2 to control visual placement independent of DOM order (DOM order should be text-first for accessibility).

Feature Architecture C: The Single Spotlight

Best for: one hero feature that defines the product, or a product demo/video section

One massive visual (product screenshot, video embed, interactive demo) centered with minimal text above. The visual IS the section.

[section container: py-24 lg:py-32, max-w-6xl mx-auto px-6, text-center]
  [eyebrow: mono label]
  [heading: text-3xl lg:text-4xl, max-w-2xl mx-auto, mb-4]
  [subtext: text-lg, muted, max-w-xl mx-auto, mb-12]
  [visual: rounded-2xl overflow-hidden, shadow-2xl, border border-white/10]
    [product screenshot or video, full-width within container]
  [optional floating detail cards: absolute positioned, showing UI details]

SECTION TYPE: Social Proof

Answers "who else trusts this?" - the single most powerful conversion element after the hero.

Proof Architecture A: The Logo Strip

Best for: B2B SaaS with recognizable client logos

A single horizontal row of client logos, muted to grayscale, on a slightly different background tone. NO "Trusted by" heading in large text - the logos speak for themselves.

[section: py-12 lg:py-16, border-y border-white/5 (dark) or border-black/5 (light)]
  [optional small label: "Trusted by teams at" - text-xs, muted, uppercase, tracking-wide, mb-6, text-center]
  [logo row: flex items-center justify-center gap-12 lg:gap-16, flex-wrap]
    [each logo: h-6 lg:h-8, opacity-40 hover:opacity-80, transition, grayscale]

/* BLUEPRINT: Logo strip
   WHY: Grayscale + low opacity prevents logos from competing with 
   the page's own brand colors. Hover reveals the real logo color, 
   adding a subtle interactive layer. The strip sits in a band 
   (border-y) to visually separate it without heavy background changes. */
.logo-strip img {
  height: 2rem;
  filter: grayscale(100%);
  opacity: 0.4;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo-strip img:hover {
  filter: grayscale(0%);
  opacity: 0.8;
}

Proof Architecture B: The Testimonial Cascade

Best for: service businesses, agencies, consumer products - where human voice sells

2-3 large testimonial cards in an asymmetric layout. NOT a uniform grid. One testimonial is larger/featured. Include real names, real titles, real photos (or quality avatars).

[section container: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [section heading: left-aligned or centered, mb-16]
  [testimonial grid: grid grid-cols-1 lg:grid-cols-3 gap-6]
    [featured card: lg:col-span-2, bg-subtle, rounded-2xl, p-8-10]
      [large quote: text-xl lg:text-2xl, font-medium, leading-relaxed, mb-6]
      [author row: flex items-center gap-4]
        [avatar: w-12 h-12 rounded-full]
        [name + title: text-sm]
    [secondary card: bg-subtle, rounded-2xl, p-8]
      [quote: text-base, mb-6]
      [author row]
    [secondary card: bg-subtle, rounded-2xl, p-8]
      [quote: text-base, mb-6]
      [author row]

⚠ Drift Warning: Testimonial cards that all look identical with the same padding, same text size, and centered alignment are the #1 AI slop pattern for proof sections. ONE card must be visually dominant. Vary sizes. Consider pulling a single powerful sentence as a large display quote above the grid.

Proof Architecture C: The Metric Bar

Best for: products with impressive numbers - users, revenue processed, uptime, speed

3-4 large numbers in a horizontal strip, each with a tiny label below. Numbers are the largest text on the page outside the hero heading. Let the numbers breathe.

[section: py-16 lg:py-24, border-y border-white/5]
  [metrics row: grid grid-cols-2 lg:grid-cols-4 gap-8, max-w-5xl mx-auto, text-center]
    [metric]
      [number: text-4xl lg:text-5xl, font-semibold, tracking-tight]
      [label: text-sm, muted, mt-2]
    [metric]
      [number] [label]
    ...

/* BLUEPRINT: Metric counter
   WHY: Tabular figures prevent layout shift during count-up animations.
   The numbers should feel monumental - they are social proof encoded 
   as typography. */
.metric-number {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

SECTION TYPE: Process / How It Works

Answers "how does this actually work?" - reduces perceived complexity.

Process Architecture A: The Numbered Steps

Best for: 3-5 step processes, onboarding flows, service delivery timelines

Vertically stacked steps with large step numbers, connected by a subtle vertical line. Each step has a heading and 1-2 line description. Optionally, a visual on the side that changes per step.

[section container: py-24 lg:py-32, max-w-5xl mx-auto px-6]
  [section heading + subtext, centered, mb-16]
  [steps: relative, space-y-16]
    [vertical line: absolute left-6 top-0 bottom-0 w-px bg-white/10 (dark)]
    [step: flex gap-8 items-start]
      [number circle: w-12 h-12 rounded-full border-2, flex items-center justify-center, relative z-10, bg-background]
        [number: text-lg font-semibold]
      [content]
        [heading: text-xl font-medium, mb-2]
        [description: text-base muted, max-w-lg]

Process Architecture B: The Horizontal Flow

Best for: simple 3-step processes, visual learners, SaaS onboarding

3 steps laid out horizontally with connecting arrows or lines between them. Each step has an icon or small visual, a heading, and a short description.

[section: py-24 lg:py-32]
  [heading, centered, mb-16]
  [flow: grid grid-cols-1 md:grid-cols-3 gap-0, max-w-5xl mx-auto]
    [step: px-8, relative]
      [icon or visual: w-12 h-12, mb-4]
      [heading: text-lg font-medium, mb-2]
      [description: text-sm muted]
      [connector arrow: hidden on mobile, absolute right-0 top-1/4] ← between steps only

⚠ Drift Warning: This is the highest-risk architecture for AI slop - three identical boxes with icons is the default bad output. Save it ONLY for genuinely simple 3-step flows. If you have more than 3 steps, or complex steps, use Architecture A instead.

SECTION TYPE: Case Studies / Results

Answers "what results does this actually get?" - proof with depth.

Case Study Architecture A: The Card Gallery

Best for: agencies, studios, portfolios with visual work

Large image cards in a 2-column asymmetric grid. One card is taller, creating visual tension. Each card shows a project image with the client name and a one-line result overlaid or below.

[section: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [heading + subtext, mb-16]
  [gallery: grid grid-cols-1 lg:grid-cols-2 gap-6]
    [card: group, rounded-2xl, overflow-hidden, aspect-[4/3] or aspect-[3/4] - VARY]
      [image: w-full h-full object-cover, transition group-hover:scale-105]
      [overlay: absolute bottom-0 inset-x-0, p-6, bg-gradient-to-t from-black/60 to-transparent]
        [client name: text-lg font-semibold, text-white]
        [result line: text-sm text-white/70]

Case Study Architecture B: The Single Deep Dive

Best for: one flagship case study that tells a story

Full-width section dedicated to a single client story. Large hero image for the case study, followed by a 2-column layout with the challenge on one side and the results (with metrics) on the other.

[section: py-24 lg:py-32]
  [case study image: full-width, max-h-[60vh], object-cover, rounded-2xl mx-6]
  [content: grid grid-cols-1 lg:grid-cols-2 gap-12, max-w-6xl mx-auto, px-6, mt-12]
    [left: challenge]
      [label: "THE CHALLENGE", mono, muted, mb-4]
      [text: leading-relaxed]
    [right: results]
      [label: "THE RESULTS", mono, muted, mb-4]
      [metrics: 2-3 large numbers with labels]
      [text: brief summary]

SECTION TYPE: Pricing

Answers "what does it cost?" - must feel transparent, not overwhelming.

Pricing Architecture A: The Clean Tiers

Best for: SaaS with 2-3 plans

2-3 pricing cards side by side. The recommended plan is visually elevated (different background, subtle border glow, or "Popular" badge). Cards are NOT identical height - the popular plan can be slightly taller.

[section: py-24 lg:py-32, max-w-5xl mx-auto px-6]
  [heading + subtext, centered, mb-4]
  [optional billing toggle: monthly/annual, centered, mb-12]
  [pricing grid: grid grid-cols-1 md:grid-cols-3 gap-6 items-start]
    [plan card: rounded-2xl, border, p-8]
      [plan name: text-lg font-medium, mb-2]
      [plan description: text-sm muted, mb-6]
      [price: text-4xl font-semibold + period label, mb-8]
      [feature list: space-y-3, text-sm]
        [feature: flex items-center gap-3, check icon + text]
      [CTA button: w-full, mt-8]
    [popular plan: same structure but - bg-accent/5, border-accent/20, ring-1 ring-accent/10]
      [badge: "Most popular" - absolute or inline, small pill]

⚠ Drift Warning: Pricing cards with 15+ features listed in tiny text are unreadable. Max 6-8 features per card. Lead with the differentiating features, not the ones shared across all plans.

Pricing Architecture B: The Comparison Table

Best for: complex products with many differentiating features

A full comparison matrix below simplified plan cards. The cards show price + CTA only. The table below shows detailed feature comparisons with checkmarks.

[plan summary: grid grid-cols-3, each card minimal - name + price + CTA]
[comparison table: mt-12, w-full]
  [table head: plan names as columns]
  [table body: feature categories as groups]
    [category heading: font-semibold, bg-subtle, full-width]
    [feature rows: text-sm, check/x/dash per plan]

SECTION TYPE: FAQ

Kills remaining objections. The last defense before the final CTA.

FAQ Architecture A: The Accordion

Best for: 5-8 common questions

Single-column accordion with smooth expand/collapse. Questions are left-aligned, answers expand below with gentle height animation. A subtle rotation on the chevron/plus icon.

[section: py-24 lg:py-32, max-w-3xl mx-auto px-6]
  [heading, centered or left, mb-12]
  [accordion: divide-y divide-white/10]
    [item: py-5]
      [trigger: flex justify-between items-center, cursor-pointer, w-full]
        [question: text-base font-medium, text-left]
        [icon: w-5 h-5, transition rotate, text-muted]
      [answer panel: overflow-hidden, transition max-height]
        [answer text: text-sm muted, pt-4, leading-relaxed, max-w-2xl]

/* BLUEPRINT: Accordion animation
   WHY: max-height transition is the simplest pure-CSS accordion.
   grid-template-rows: 0fr → 1fr is smoother but requires 
   wrapping content in an inner div with overflow:hidden.
   The cubic-bezier gives a snappy open, gentle close. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer[data-open="true"] {
  grid-template-rows: 1fr;
}
.faq-answer > div {
  overflow: hidden;
}

SECTION TYPE: Final CTA Banner

The last conversion push. This section exists ONLY to get the click.

CTA Architecture A: The Full-Width Banner

Best for: any page - this is the universal closer

A full-width band with a contrasting background (if the page is dark, consider a slightly lighter dark or a subtle gradient). Large heading, short subtext, single prominent CTA button.

[section: py-20 lg:py-28, text-center]
  [optional subtle background: bg-gradient or slightly shifted tone]
  [heading: text-3xl lg:text-5xl, font-semibold, tracking-tight, mb-4]
  [subtext: text-lg muted, max-w-xl mx-auto, mb-8]
  [CTA button: large pill, px-10 py-4, font-medium]

⚠ Drift Warning: CTA banners with 3 buttons, a form, social links, and a paragraph of text are anti-patterns. ONE heading. ONE button. That's it. The simplicity is the persuasion.

CTA Architecture B: The Split CTA

Best for: pages where you want to show a visual alongside the final push

Two-column split: compelling visual (product shot, illustration, or abstract) on one side, heading + CTA on the other. The visual reinforces the value prop one last time.

[section: py-24 lg:py-32, grid grid-cols-1 lg:grid-cols-2 gap-12 items-center, max-w-6xl mx-auto px-6]
  [visual side: rounded-2xl, overflow-hidden]
  [text side]
    [heading: text-3xl lg:text-4xl, font-semibold, mb-4]
    [subtext: muted, mb-8]
    [CTA button]

SECTION TYPE: Footer

Not an afterthought. The footer is the last thing a visitor sees if they scroll to the bottom without converting.

Footer Architecture A: The Minimal Strip

Best for: landing pages, product launches - pages with a single conversion goal

A single row: logo on the left, essential links in the center, social icons on the right. No multi-column mega-footer.

[footer: border-t border-white/10, py-8 lg:py-12, px-6]
  [inner: max-w-7xl mx-auto, flex flex-col lg:flex-row items-center justify-between gap-6]
    [logo: h-6 or text-lg font-semibold]
    [links: flex gap-6, text-sm, muted, hover:text-white transition]
    [right: flex items-center gap-4]
      [social icons: w-5 h-5 each, muted, hover:text-white]
  [copyright: text-center lg:text-left, text-xs, muted, mt-8 lg:mt-0]

Footer Architecture B: The Structured Footer

Best for: multi-page sites, SaaS products, agencies - where navigation matters

Multi-column grid with link categories. Logo + tagline on the far left, 3-4 link columns, newsletter signup on the far right.

[footer: border-t border-white/10, py-16 lg:py-20, px-6]
  [inner: max-w-7xl mx-auto, grid grid-cols-2 lg:grid-cols-5 gap-8]
    [brand col: lg:col-span-1]
      [logo]
      [tagline: text-sm muted, mt-3, max-w-xs]
    [link col: space-y-3]
      [column heading: text-sm font-semibold, mb-4]
      [link: text-sm muted hover:text-white]
      ...
    [link col] [link col]
    [newsletter col: lg:col-span-1]
      [heading: text-sm font-semibold, mb-4]
      [email input + submit button: flex]
  [bottom bar: mt-12 pt-8 border-t border-white/5, flex justify-between, text-xs muted]
    [copyright]
    [legal links: privacy, terms]

SECTION TYPE: Visual Break

Prevents "wall of same" - a breathing moment in the page.

Break Architecture A: The Full-Bleed Image

A single full-width atmospheric image with no text overlay. Serves as a palette cleanser between content-heavy sections.

[section: py-0, -mx-6 or full-bleed via 100vw trick]
  [image: w-full, h-[40vh] lg:h-[60vh], object-cover]

Break Architecture B: The Giant Stat

One massive number or statement centered in a generous vertical space. Nothing else.

[section: py-24 lg:py-40, text-center]
  [stat: text-6xl lg:text-8xl, font-semibold, tracking-tight]
  [label: text-sm muted, mt-4]

Break Architecture C: The Horizontal Marquee

A continuous scrolling strip of text, logos, or tags. CSS-only, no JS required.

[section: py-6, overflow-hidden, border-y border-white/5]
  [marquee track: flex gap-8, animate-scroll]
    [items repeated 2x for seamless loop]

/* BLUEPRINT: CSS marquee
   WHY: Translating the full width then resetting creates a seamless loop.
   Duplicating the content ensures no gaps during the loop.
   30s is slow enough to be ambient. */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}

✓ Quality Gate: Build

Before moving to Phase 4, confirm for EACH section:

• Architecture was followed without blending
• Content is realistic (no "Lorem ipsum", no "[Feature Name]" placeholders)
• Section heading uses a DIFFERENT scale than the previous section's heading
• Background tone is NOT identical to the adjacent section
• The section could stand alone on Awwwards SOTD nominees

Phase 4: Page Composition Diff

After all sections are built, audit the FULL PAGE as a composition. This catches problems that only appear when sections are stacked together.

Visual Rhythm Diff

Content Quality Diff

Conversion Flow Diff

Anti-Slop Diff

Mobile Composition Diff

Section Transition Patterns

How sections connect to each other is as important as the sections themselves. Do NOT just stack sections with identical padding.

→ Background Transitions

→ Spacing Rhythm

The Core Principles (Sections)

These apply to every section regardless of architecture:

Sections are not islands. Every section must feel like it belongs to the same page as the hero. Same palette, same type system, same visual language. A section that could be dropped into any random landing page is a generic section.

Show, don't tell. Product screenshots beat feature lists. Real metrics beat adjectives. Client logos beat "trusted by thousands." Visual evidence converts harder than written claims.

Vary the rhythm. A page where every section is py-32, centered heading, 3-column grid, repeat is a wall. Alternate densities, layout directions, background tones, and content types.

Kill the third card. If you catch yourself making a 3-equal-card grid for the third time on the same page, stop. Use a different architecture. The 3-card grid is the most overused pattern in web design.

One section, one job. Each section answers ONE visitor question. If a section is trying to showcase features AND display testimonials AND show pricing, split it into separate sections.