Skip to content

ADR 09: Cinematic Landing & Marketing Architecture

Status: Accepted / Applied Date: Jan 11, 2026 Context: Refactor of the monolithic Landing Page and associated marketing routes (News, Press, Articles).

1. Problem Statement

The original LandingPage.tsx was a monolithic component with deeply nested JSX. This led to: 1. Z-Index Fragility: Cinematic backgrounds often swallowed content or became invisible due to inconsistent stacking contexts. 2. Maintenance Friction: Modifying a specific section required navigating 600+ lines of code, risking side effects in other sections. 3. Visual Drift: Linked pages (News Browser, Press Page) used inconsistent layouts and typography, breaking the premium design system. 4. Performance Inflexibility: Heavy logical components (like Search) were coupled with the landing page, making granular performance optimization difficult.

2. Decision

Extract all sections into a Modular, Layered Component Architecture using the LandingSection wrapper.

Core Architecture: The LandingSection Wrapper

Standardizes the stacking context across the entire marketing domain: * z-[-30]: Base background color. * z-[-20]: Cinematic images/textures (Background layer). * z-[-10]: Atmospheric overlays (Gradients/tints/blurs). * z-[0]: Main Content context. * z-[10]: Structural Accents (Borders, markers).

Component Orchestration

The LandingPage is refactored into a stateless orchestrator of: * HeroSection * PulseSection (Real-time IoT/Telemetry telemetry) * UpdatesSection (Dynamic news feed) * GovernancePeople / GovernanceStructure * PartnersSection * TransformationSection

3. Visual Standard: "Cinematic Obsidian"

Codified the "Cinematic Obsidian" design system for all marketing-facing pages: * Background: Depth via gradients (#030303 to #050505). * Typography: Uppercase, italic, font-black headers with high tracking/kerning for a premium editorial look. * Accents: Gold (sd-gold) and Bright Blue (sd-blue-bright) used for micro-glimmer highlights and active indicators.

4. Verification Protocol

Implemented automated visual verification via Playwright (landing-page-visibility.spec.ts) to ensure background visibility and layering hierarchy remains "Evergreen" during evolutionary maintenance.

5. Consequences

✅ Positive

  • Reliability: Guaranteed visibility of cinematic backgrounds via enforced stacking.
  • Evolutionary Ease: New sections can be added/removed without affecting the global page state.
  • Design Cohesion: The News Browser and Article View now feel like a seamless extension of the brand.
  • Dynamic Integration: The UpdatesSection now consumes real articles from the KnowledgeService instead of hardcoded skeletons.

⚠️ Neutral

  • File Count: Significant increase in individual component files in the marketing domain.
  • Hydration: Multiple Framer Motion whileInView triggers require careful monitoring for performance ceiling.