Interactive Case Study

Install

The whole page lands in app/templates/interactive-case-study/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

1. 1

   Immersive Opening and Project Facts

   A minimal nav, a parallax hero headline and a four-column fact band for client, role, timeline and team.

   hero
2. 2

   The Challenge in Numbers

   Three oversized figure cards pinning down the pain points: abandonment rate, time spent and rating.

   stats
3. 3

   Before and After

   The old form and the new map interface mocked up side by side, with a four-row table comparing them point by point.

   product
4. 4

   Four-Step Approach

   Pinned scrolling advances through four stages: field research, decision path, map interface and rolling out the design system.

   timeline
5. 5

   Core Features

   The four decisive design calls: map first, a safety score, long-stay pricing and live chat.

   features
6. 6

   Impact in Numbers

   Four outcome metrics from the first ninety days after launch, revealed by a count-up animation on entering the viewport.

   stats
7. 7

   Testimonial and Closing Action

   A quote from the head of product, a gradient closing headline and two buttons to wrap up the case study.

   cta
8. 8

   Footer

   A spare dark footer with the brand mark, copyright line and production credits.

   footer