Patterns & Templates

Page layouts, section templates, and common UI compositions — ready-to-use patterns built on foundations and components.

For Claude / LLM Reference

Reference this file when building pages. Call sections by name: "refer to patterns Hero Sections" or "use the Page Layouts section".

Sections

3.1 Page Layouts — full page structures
3.2 Hero Sections — page headers, CTAs
3.3 Feature Grids — product features, benefits
3.4 Content Sections — text blocks, testimonials
3.5 Section Animations — scroll-triggered reveals

Quick Reference

Container: container mx-auto px-4
Section spacing: py-16 md:py-24
Grid gap: gap-6 md:gap-8
Max width: max-w-3xl mx-auto

Key Files

_layouts/default.html
_includes/header.html
_includes/footer.html

3.1 Page Layouts

LLM Usage Guide:

• Landing pages: Hero + features + testimonials + CTA + footer
• Content pages: Header + prose content + sidebar (optional) + footer
• Tool pages: Minimal header + full-width tool UI + minimal footer
• Spacing: Use consistent vertical rhythm with py-16/py-24 between sections

Layout examples coming soon.

3.2 Hero Sections

LLM Usage Guide:

• Hero 1 (Centered + Carousel): Homepage style — centered text content at top, two-row image carousel below scrolling opposite directions, bone bg with grid tiles
• Hero 2 (Split): Card left, text right — configurable bg (bone/white/orange/charcoal), grid tiles
• Hero 3 (Blurred Split): Blurred bg image + noise, card left, text right
• Hero 4 (Blurred Centered): Blurred bg image + noise, centered content top, image below
• Hero 5 (Meet Team): Bone bg, centered tiles (radial mask), team images, centered text below
• Full-width: Background always full-width, content within container mx-auto px-4

Hero Section Quick Reference

Type	Background	Layout	Use Case
Hero 1	bone-200 + grid tiles	Centered text, 2-row carousel below	Homepage
Hero 2	Configurable + grid tiles	Card left, text right	Feature pages, How it works
Hero 3	Blurred image + noise	Card left, text right	Role pages, Use cases
Hero 4	Blurred image + noise	Centered content + image	Role pages (alt), Landing
Hero 5	bone-200 + radial tiles	Images top, text centered below	Meet the Team, Team member

Hero 1: Centered with Carousel (Homepage)

Full-width bone background with grid tiles. Centered tag, headline, subheading, and CTAs at top, with animated two-row image carousel below scrolling in opposite directions.

AI-POWERED USER RESEARCHERS

The fastest path to real customer conversations

Let our AI-powered user researchers do it for you. They plan, conduct then analyse real customer interviews, providing you with essential actionable insights.

Structure

<!-- Hero content -->
<div class="w-full bg-grid-pattern">
  <div class="container mx-auto px-4">
    <div class="flex flex-col justify-center items-center py-16 lg:py-24">
      <!-- Tag chip -->
      <div class="text-overline flex items-center bg-white bg-opacity-50 rounded-xl px-4 py-2 mb-6">
        <span class="inline-block w-[7px] h-[7px] rounded-full bg-orange-600 mr-2"></span>
        TAG TEXT
      </div>
      <h1 class="text-display text-center pb-4 px-6 max-w-4xl">...</h1>
      <p class="text-body md:text-body-lg text-center max-w-5xl opacity-80 px-6">
        <span class="font-bold text-orange-600">Highlighted text.</span> Regular text.
      </p>
      <div class="flex flex-col md:flex-row gap-4 mt-8">
        <a href="#" class="btn-primary">...</a>
        <a href="#" class="btn-secondary">...</a>
      </div>
    </div>
  </div>
</div>

<!-- Image carousel -->
<div class="w-full overflow-hidden bg-grid-pattern mask-to-b">
  <!-- Top row: scrolls left -->
  <div class="flex gap-4 md:gap-8 mb-4 md:mb-8 carousel-row-left">
    <div class="relative w-[120px] h-[120px] md:w-[200px] md:h-[200px] flex-shrink-0 rounded-3xl overflow-hidden">
      <img src="..." class="w-full h-full object-cover" />
      <div class="absolute inset-0 rounded-3xl shadow-[inset_0_0_0_4px_rgba(255,255,255,0.5)]"></div>
    </div>
    <!-- Duplicate images for seamless loop -->
  </div>
  <!-- Bottom row: scrolls right -->
  <div class="flex gap-4 md:gap-8 carousel-row-right">...</div>
</div>

Reusable Partial

The carousel is a shared Jekyll partial for reuse across pages:

{% include hero-carousel.html %}

File: _includes/hero-carousel.html

Carousel Animation:

• carousel-row-left: CSS animation scrolling images left continuously
• carousel-row-right: CSS animation scrolling images right continuously
• Seamless loop: Duplicate images at end of each row to create infinite scroll effect
• Inset shadow: shadow-[inset_0_0_0_4px_rgba(255,255,255,0.5)] adds subtle white border on images
• Mask: mask-to-b fades carousel to bottom edge
• Responsive: w-[120px] md:w-[200px] — images scale up on larger screens

Hero 2: Split (Card Left, Text Right)

Card on left, text content on right. Background is configurable (bone, white, orange, or charcoal) with appropriate grid tiles.

Background Variants

• Bone: bg-bone-200 + bg-grid-pattern
• White: bg-white + bg-grid-pattern
• Orange: bg-orange-600 + bg-grid-pattern-light + white text classes
• Charcoal: bg-charcoal-900 + bg-grid-pattern-light + white text classes

Card Content

CONDUCT CUSTOMER INTERVIEWS

Our AI agent conducts chat or zoom style call interviews

Describe your goals in plain English. Our AI researcher builds a complete study plan — no research training required.

Bone background variant shown above

Hero 3: Blurred Background (Card Left, Text Right)

Full-width blurred background image with medium visual noise overlay. Card on left, text content on right. Great for role pages and use cases.

Card Content

PRODUCT MANAGERS

Title for product managers

Describe your goals in plain English. Our AI researcher builds a complete study plan — no research training required.

Blurred Background Image Structure

<div class="relative py-16 md:py-24 overflow-hidden">
  <!-- Blurred background image -->
  <div
    class="absolute inset-0 bg-cover bg-center scale-150"
    style="background-image: url('image.jpg'); filter: blur(50px);"
  ></div>

  <!-- Optional tint overlay -->
  <div class="absolute inset-0 bg-black/10"></div>

  <!-- Noise overlay (medium: 0.40 opacity) -->
  <svg class="absolute inset-0 w-full h-full pointer-events-none opacity-[0.40] mix-blend-overlay z-[5]">
    <filter id="noise">
      <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch" />
    </filter>
    <rect width="100%" height="100%" filter="url(#noise)" />
  </svg>

  <div class="container mx-auto px-4 relative z-10">
    <!-- Content with white text classes -->
  </div>
</div>

Hero 4: Blurred Background (Centered Content)

Full-width blurred background with centered content at top and image/card below. Alternative layout for role and landing pages.

PRODUCT MANAGERS

Title for product managers

Describe your goals in plain English. Our AI researcher builds a complete study plan — no research training required.

Image or Card Content

Use text-center and max-w-5xl mx-auto for centered content

Hero 5: Meet the Team

Bone background with centered grid tiles (radial mask fading on all edges). Team member images at top (carousel or single), centered text content below.

AI-Powered User Researcher

Meet Alice Walker

Let us find the right participants, conducts interviews, analyse responses, and delivers actionable insights—with results in hours, not weeks.

Image Arrangement (Overlapping Layers, Square):

• Center image: Full opacity, 260px square on lg, z-30, inset white ring shadow-[inset_0_0_0_4px_rgba(255,255,255,0.5)]
• Inner side images: 50% opacity, 200px square on lg, z-20, overlap with -mr-6/-ml-6
• Outer side images: 30% opacity, 160px square on lg, z-10, blur-[1px] , overlap with -mr-8/-ml-8
• Vertical alignment: All images centered vertically ( items-center )
• Tag badge: Positioned at bottom of center image, slightly overlapping ( -bottom-3 )

Variants:

• Meet the Team page: Show carousel of all team members with animation
• Individual team member page: Show single centered image of that team member (side images still visible but faded)
• Dynamic title: "Meet the Team" for overview, "Meet [Name]" for individual pages

Hero Section CSS Reference

Background Classes

bg-bone-200 — Default hero bg
bg-grid-pattern — Dark tiles (on light)
bg-grid-pattern-light — Light tiles (on dark)
mask-to-tr — Fade to top-right
mask-radial-center — Fade from center

Blurred Background

filter: blur(40px) — Background blur
transform: scale(1.1) — Prevent blur edges
opacity-[0.40] — Medium noise
mix-blend-overlay — Noise blend

Key principle: Background fills full width, content uses container mx-auto px-4

3.3 Feature Grids

LLM Usage Guide:

• 3-column grid: grid-cols-1 md:grid-cols-3 gap-6 — for feature highlights
• 2-column grid: grid-cols-1 md:grid-cols-2 gap-8 — for detailed features
• Bento grid: Mixed sizes with col-span utilities — for visual variety
• Icons: Use consistent icon size (w-10 h-10) with bg-orange-100 container

Feature grid examples coming soon.

3.4 Content Sections

LLM Usage Guide:

• Text blocks: max-w-3xl mx-auto for readable line lengths
• Testimonials: Card-based with avatar, quote, attribution
• CTA sections: Centered text + primary button, often with mesh gradient bg
• FAQ sections: Accordion or simple list with text-title-sm questions

Content section examples coming soon.

3.5 Section Animations

LLM Usage Guide:

• Hero sections: Use CSS animate-entrance for above-fold content (instant load)
• Below-fold sections: Use GSAP data-scroll-animate for scroll-triggered reveals
• Stagger pattern: Add data-scroll-stagger="0.15" to section container for sequential child animations
• Featured elements: Use data-scroll-scrub="1" for scroll-linked animations on hero cards
• Full docs: See Foundations → Motion

Animation Types: When to Use Each

Choose the right animation approach based on content position and importance.

Type	Implementation	Use Case	Trigger
CSS Entrance	`animate-entrance` class	Hero sections, above-fold content	Page load (immediate)
GSAP Triggered	`data-scroll-animate`	Below-fold sections, feature grids	Element enters viewport
GSAP Scrub	`data-scroll-scrub="1"`	Featured cards, parallax effects	Scroll position (linked)

Hero Section Pattern (CSS Entrance)

Above-fold content uses CSS animations that run on page load with staggered delays.

Hero with CSS Entrance Animations

<!-- Hero content - animates on page load -->
<div class="flex flex-col items-center">
  <!-- Badge (no delay) -->
  <div class="animate-entrance">
    AI-powered User Researchers
  </div>

  <!-- Headline (100ms delay) -->
  <h1 class="animate-entrance animate-entrance-delay-1">
    Customer insights you need...
  </h1>

  <!-- Subheading (200ms delay) -->
  <p class="animate-entrance animate-entrance-delay-2">
    Our AI-powered researcher...
  </p>

  <!-- CTAs (300ms delay) -->
  <div class="animate-entrance animate-entrance-delay-3">
    <a class="btn-primary">Get started</a>
    <a class="btn-secondary">Learn more</a>
  </div>
</div>

Key classes: animate-entrance + animate-entrance-delay-1/2/3 (100ms increments)

Content Section Pattern (GSAP Scroll)

Below-fold content uses GSAP for scroll-triggered animations with staggered children.

Section with Staggered Scroll Animations

<!-- Content section - animates on scroll -->
<div class="container mx-auto" data-scroll-stagger="0.15">
  <!-- Badge -->
  <div class="text-overline" data-scroll-animate="fade-up">
    We've all been there
  </div>

  <!-- Headline -->
  <h2 class="text-display-sm" data-scroll-animate="fade-up">
    You planned 20 customer interviews...
  </h2>

  <!-- Body text -->
  <p class="text-body-lg" data-scroll-animate="fade-up">
    The rest just didn't happen...
  </p>
</div>

Key: Parent has data-scroll-stagger="0.15" — each child animates 150ms after the previous

Featured Card Pattern (Scroll-Linked)

Hero-style cards that scale and move with scroll position using scrub mode.

Scroll-Linked Featured Card

<!-- Card animation tied to scroll position -->
<div
  class="card-white w-full md:w-1/3"
  data-scroll-animate="scale-up"
  data-scroll-scrub="1"
  data-scroll-start="top bottom"
  data-scroll-end="top 40%"
>
  <h3 class="text-display-sm">Meet Alice</h3>
  <img src="alice.jpg" alt="Alice" />
</div>

Effect: Card starts at 70% scale and opacity 0 when bottom of viewport reaches it, scales to 100% when top of card reaches 40% viewport height

Section Animation Guidelines

Best practices for animating different page sections.

• Use CSS entrance for above-fold hero content
• Add GSAP scroll animations to below-fold sections
• Group related elements with stagger parent
• Use scrub mode sparingly for featured elements
• Keep stagger values between 0.08-0.2s

Don't

• Mix CSS entrance and GSAP on same element
• Animate every single element (too busy)
• Use long delays that feel sluggish (>0.3s)
• Apply scrub to text content (disorienting)
• Forget to test on mobile (performance)

Section Animation Reference

CSS Entrance (Above-Fold)

animate-entrance — base animation class
animate-entrance-delay-1 — 100ms delay
animate-entrance-delay-2 — 200ms delay
animate-entrance-delay-3 — 300ms delay

GSAP Scroll (Below-Fold)

data-scroll-animate="fade-up" — standard reveal
data-scroll-stagger="0.15" — on parent
data-scroll-scrub="1" — scroll-linked
data-scroll-start/end — trigger points

Key files: assets/js/scroll-animations.js (GSAP), assets/css/src.css (CSS entrance)

Plan

Recruit

Conduct

Analyse

Alice Walker

Ana Martinez

Anton Novak

Hana Park

Olivia Brooks

Omar Ali

Product Managers

Marketing Managers

Product Designers

Customer Success

Blog

Changelog

FAQs

Patterns & Templates

3.1 Page Layouts

3.2 Hero Sections

Hero 1: Centered with Carousel (Homepage)

The fastest path to real customer conversations

Hero 2: Split (Card Left, Text Right)

Our AI agent conducts chat or zoom style call interviews

Hero 3: Blurred Background (Card Left, Text Right)

Title for product managers

Hero 4: Blurred Background (Centered Content)

Title for product managers

Hero 5: Meet the Team

Meet Alice Walker

3.3 Feature Grids

3.4 Content Sections

3.5 Section Animations

Animation Types: When to Use Each

Hero Section Pattern (CSS Entrance)

Content Section Pattern (GSAP Scroll)

Featured Card Pattern (Scroll-Linked)

Section Animation Guidelines