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.

Version History

Version Date Author Change
0.1.0 2026-01-26 Antigravity Initial Audit & Metadata Injection