7a336e6e/frontend-landing/building-components

🧱 Building Components

All visual components for the immersive storybook landing page.

Sub-Skills

| # | File | What It Covers | |---|------|----------------| | 01 | Theme & CSS | CSS custom properties, glassmorphism, gradients, glow effects, keyframes | | 02 | Scene Config | The PAGES[] data array, transition variants, TypeScript interfaces | | 03 | Intro Sequence | Branded loading animation with sessionStorage persistence | | 04 | Mascot / Guide | Animated character with speech bubbles, pupil tracking, blink, typewriter | | 05 | Scene Templates | Hero, Problem, Solution, Product, Process, Stats, Embed archetypes | | 06 | Page Indicator | Vertical dot timeline with labels and direct navigation | | 07 | Mobile Responsive | Breakpoint strategy, touch targets, hidden elements, overflow handling |

Design Token Strategy

All colors flow from the scene config. Each page has a color property that drives:

• Background glow (radial-gradient with the page color at 4-6% opacity)
• Mascot speech bubble border and text
• Badge and accent colors in content
• Page indicator active dot

This means you define colors once in the PAGES[] config, and every component adapts.

Component Colocation

The journey is a single file containing:

• Type definitions
• Scene config array
• Transition variants
• Intro sequence component
• Mascot component
• All scene components
• Page indicator
• Main orchestrator (default export)

This is intentional. These components are tightly coupled to the storybook flow and share state. Extracting them into separate files would create prop-drilling or require a context provider — unnecessary complexity for a single-page experience.

Extract only:

• Background effects (star-field, particles) — purely visual, no shared state
• Logo component — reused across the site
• Embeddable sections (FAQ, signup) — exist independently of the journey

Next Step

Start with → 01 — Theme & CSS