Codebase Export

# The Design Dividend - Codebase Export

## Structure Overview
{
  "entities": [
    "NewsletterSubscriber.json",
    "ContentDownload.json",
    "ContactEnquiry.json",
    "DialogueInterest.json",
    "NavigatorLead.json",
    "DialogueBooking.json",
    "DialogueTrack.json",
    "RoomInvitation.json"
  ],
  "pages": [
    "Home.jsx",
    "Horizon2030.jsx",
    "Horizon2030Alt.jsx",
    "FutureOfDesign.jsx",
    "FutureOfMobility.jsx",
    "FutureOfTalentCapital.jsx",
    "FutureOfExperientialAdvantage.jsx",
    "FutureOfPlace.jsx",
    "FutureOfFMCG.jsx",
    "FMCGBeauty.jsx",
    "FMCGFoodDrink.jsx",
    "FutureOfDesignPortal.jsx",
    "HomeAlt.jsx",
    "Export.jsx"
  ],
  "components": [
    "Footer.jsx",
    "DialogueTracksCarousel.jsx",
    "ScrollReveal.jsx",
    "UserNotRegisteredError.jsx",
    "translations.js",
    "motion-variants.js",
    "navigator/ForceField.jsx",
    "navigator/HeatMapVisualization.jsx",
    "navigator/TensionDeepDive.jsx",
    "navigator/TensionDetailPanel.jsx",
    "navigator/navigatorData.js",
    "navigator/tensionData.js",
    "navigator/tensionPositions.js",
    "navigator/layers/DomainVenn.jsx",
    "navigator/layers/ForceArcs.jsx",
    "navigator/layers/HexagonLayer.jsx",
    "navigator/layers/PESTLERing.jsx",
    "navigator/layers/TensionNodes.jsx",
    "navigator/ui/HoverInfoBox.jsx",
    "navigator/ui/InfoWindow.jsx",
    "navigator/ui/Legend.jsx",
    "horizon/HorizonHeatmap.jsx",
    "horizon/HorizonVisualization.jsx"
  ],
  "layout": "Layout.js",
  "styles": "globals.css"
}

## Signature Gradient Strip
- Applied consistently across the site as a visual divider/accent element
- CSS: linear-gradient(to right, #2d2a7a, #4a8fc4, #6dbfb0, #b8c94a, #e8a020, #d4541a)
- Height: 7px, border-radius: 4px
- Used in: Hero section (under subtitle), The Format section (under BETTER FUTURES headline), Community section (above SELECTED PARTNERS)
- Width adapts to context: full-width in Format section, ~420px in hero, 80px as divider

## Color System (DD Brand)
- Background Deep: #0a0a0f (var(--dd-bg-deep))
- Background Light: #FAFAFA (var(--dd-bg-light))
- Accent Primary: #E07A5F (var(--dd-accent) - terracotta)
- Accent Dark: #B45309 (var(--dd-accent-dark))
- Text Primary: #ffffff (dark sections)
- Text Dark: #09090B (light sections)
- Text Secondary: #52525B / #a0a0a8
- Border Subtle: white/[0.06]

## Typography
- Font: System default with careful spacing
- Hero: text-3xl md:text-5xl lg:text-6xl font-light with dd-headline class
- Section titles: text-3xl md:text-4xl lg:text-5xl font-bold
- Body: text-lg md:text-xl with dd-body class (line-height: 1.7, max-width: 730px)
- Labels: text-3xl font-bold uppercase tracking-[0.2em]
- Editorial rhythm: line-height 1.18, letter-spacing -0.02em on headlines

## Key Features
- **Premium editorial aesthetic** with depth gradients (dd-bg-depth utility)
- **Fixed header** with logo centered (mobile) / left-aligned (desktop) + "Join the Community" CTA
- **Signature gradient strip** used consistently as visual divider (see Gradient Strip section)
- **Home page highlights**:
  - Hero: rotating word carousel (insight/ideas/dialogue) with gradient strip beneath subtitle
  - Active status indicator (green pulsing dot)
  - Bold subtitle for Horizon 2030
  - Stats grid (12 sessions/year, 12 seats, Free to attend)
  - Topic tags grid (AI Moment, Sustainability Reckoning, etc.)
  - Next session date display
  - Featured image with dialogue session photo
- **Dialogue tracks carousel** with drag-to-scroll interaction (680px cards, 16:10 aspect ratio)
  - 9 dialogue tracks: Design, Experiential Advantage, Creative Britain, Talent Capital, Beauty, Wellness, Air Travel, Mobility, FMCG
  - Background image overlays for select tracks
  - Right edge fade gradient
  - Scroll hint indicator
- **Request invitation modal** via Dialog component
  - Name, email, topics fields
  - Submission to DialogueInterest entity
  - Success/error feedback
- **Responsive design** (mobile + desktop optimized with breakpoint adjustments)
- **Refined Framer Motion animations** (fadeUp, hoverLift, buttonPress with cubic-bezier easing)
- **Intersection Observer** for scroll-triggered reveals
- **Language toggle support** (EN/ES) via LanguageContext

## Pages
1. **Home (/)** - Premium marketing site with:
   - Fixed header with logo + "Join the Community" CTA
   - Active status indicator on Horizon 2030 section
   - **Bold subtitle**: "Horizon 2030 is a monthly, off-record briefing & peer discussion for leaders who need to see around corners and move before the market forces them to."
   - Stats section (12 sessions/year, 12 seats, Free to attend)
   - Dialogue Tracks carousel with drag-to-scroll
   - Content section with paragraph starting "Something significant is happening..."
   - Footer with contact information

2. **Horizon2030 (/horizon2030)** - Deep dive marketing page with Navigator force field visualization
   - Interactive force field diagram with PESTLE layers
   - Tension nodes and domain Venn diagrams
   - Industry heatmap visualization
   - Lead capture forms for dialogue access

3. **Horizon2030Alt (/horizon2030alt)** - Alternative Horizon 2030 page layout
   - Dark theme with gradient backgrounds
   - Invitation request forms
   - Track-based navigation

4. **FutureOfDesign (/futureofdesign)** - Design dialogue track
   - Key tensions and questions for design leaders
   - RSVP form for seat requests
   - Session format and outcomes

5. **FutureOfMobility (/futureofmobility)** - Passenger experience dialogue
   - Case studies and industry shifts
   - Multi-step booking form
   - Focus on transportation and experience design

6. **FutureOfTalentCapital (/futureoftalentcapital)** - Talent IP dialogue
   - Strategic frameworks for talent monetization
   - Commission models and case studies
   - Private dialogue booking

7. **FutureOfExperientialAdvantage (/futureofexperientialadvantage)** - XA framework
   - Historical context and architectural layers
   - Tension points and structural shifts
   - Reservation form for dialogue sessions

8. **FutureOfPlace (/futureofplace)** - Urban development dialogue
   - Cross-stakeholder challenges
   - Paradoxes and structural shifts
   - Closed-door session requests

9. **FutureOfFMCG (/futureoffmcg)** - FMCG innovation hub
   - 7 vertical tracks across categories
   - Levels framework and tail analysis
   - Industry-specific RSVP

10. **FMCGBeauty (/fmcgbeauty)** - Beauty & Personal Care vertical
    - Category hypotheses and trends
    - Sector-specific insights

11. **FMCGFoodDrink (/fmcgfooddrink)** - Food & Drink vertical
    - Category hypotheses and market shifts
    - Innovation frameworks

12. **Export (/export)** - Complete codebase documentation and structure export

## Entities
1. NewsletterSubscriber
   - email (string, required)
   - source (string, default: "website")

2. ContentDownload
   - name (string, required)
   - email (string, required)
   - company (string, required)
   - content_type (string, enum, required)

3. ContactEnquiry
   - name (string, required)
   - email (string, required)
   - company (string)
   - message (string, required)

4. DialogueInterest
   - name (string, required)
   - email (string, required)
   - topics (string)

5. NavigatorLead
   - name (string, required)
   - email (string, required)
   - company (string)
   - role (string)
   - sector (string, required)
   - tensions_explored (array)
   - lead_type (string, enum: report/dialogue/partner)

6. DialogueBooking
   - name (string, required)
   - email (string, required)
   - company (string, required)
   - role (string)
   - tension (string, required)
   - sector (string, required)
   - message (string)

7. DialogueTrack
   - slug (string, required)
   - title (string, required)
   - type (string, enum: open/private, required)
   - tensionLine (string, required)
   - summary (string, required)
   - roles, shifts, pressures, opportunities, outcomes (various)

8. RoomInvitation
   - name (string, required)
   - email (string, required)
   - company (string, required)
   - role (string, required)
   - room_slug (string, required)
   - linkedin, status, UTM tracking (various)

## Implementation Notes

### Platform & Stack
- **Base44 platform** with React 18, Tailwind CSS, TypeScript
- Entity operations via base44.entities API
- Navigation via React Router with createPageUrl utility
- Forms use controlled components with state management
- Authentication via base44.auth (me, isAuthenticated, updateMe, logout, redirectToLogin)

### Layout System
- **Fixed header** (80px height, dark background #0a0a0f)
- Logo centered on mobile, left-aligned on desktop
- "Join the Community" CTA button (coral #E07A5F) on desktop only
- LanguageContext provider for EN/ES toggle (currently hidden in mobile menu)
- Dialog component for invitation requests
- Open Graph meta tags for social media previews

### Motion System (motion-variants.js)
- **fadeUp**: Refined entrance with 0.65s duration and cubic-bezier(0.16, 1, 0.3, 1)
- **hoverLift**: Subtle scale + translateY on hover
- **buttonPress**: Scale down + translateY on click
- **parallax**: Configurable scroll-based parallax effect
- **staggerContainer** + **staggerItem**: Sequential reveal animations
- Intersection Observer triggering with viewport options

### Surface Treatments (globals.css)
- **dd-bg-depth**: Layered radial gradients for depth on dark sections
- **dd-surface**: Subtle border (white/6%) + shadow with hover states
- **dd-surface-hover**: Enhanced shadow + translateY lift
- **dd-link**: Underline animation on hover
- **dd-image-cinematic**: Vignette overlay for images
- **dd-focus-ring**: Accessible focus states (ring-2 ring-white/20)
- **dd-headline**: Typography preset (line-height 1.18, letter-spacing -0.02em)
- **dd-body**: Body text preset (line-height 1.7, max-width 730px)

### DialogueTracksCarousel Component
- Horizontal scroll with mouse drag interaction
- cursor-grab/cursor-grabbing states
- 680px cards with 16:10 aspect ratio
- Background image overlays for select tracks (opacity 30%)
- Right edge fade gradient (linear-gradient to left)
- Scroll hint indicator ("Scroll to explore →")
- Link wrapper for tracks with dedicated pages
- scrollbar-hide CSS utility

### Home Page Structure
- **Hero Section** (dark, video background):
  - Rotating word carousel: insight / ideas / dialogue
  - Subtitle: "Exploring how design creates real-world value"
  - Signature gradient strip beneath subtitle (~420px)
  - Social icons + language toggle
- **The Format Section** (light background #F5F5F3):
  - Heading: "Better questions lead to BETTER FUTURES"
  - Full-width signature gradient strip beneath heading
  - 3-part editorial body copy sequence
  - Closing statement: "The Design Dividend exists to create those moments."
- **Community Section** (dark):
  - Buyers / Backers / Builders / Brains grid
  - Signature gradient strip as divider (80px)
  - SELECTED PARTNERS & ASSOCIATES logos
- **Horizon 2030 Section** (light background #FAFAFA):
  - Title: "Horizon 2030"
  - Bold headline (horizon2030SubtitleBold)
  - Active status indicator (green pulsing dot + text)
  - Bold subtitle
  - Stats grid: 12 sessions/year, 12 seats, Free to attend
  - Topics grid: 6 tags (AI Moment, Sustainability Reckoning, etc.)
  - "Request Invitation" button
  - Next session date text
  - Featured image (dialogue session photo)
- **DialogueTracksCarousel Section** (light background #FAFAFA)
- **Content Section** (light background #FAFAFA):
  - Centered paragraph: "Something significant is happening across every category, every sector, every boardroom..."

### Form Submissions
- DialogueInterest entity for "Join the Community" modal
- DialogueBooking entity for dialogue-specific RSVPs
- NavigatorLead entity for Horizon 2030 Navigator leads
- RoomInvitation entity for private room access requests
- All forms include loading states and success/error feedback

### Navigator Components (Horizon 2030)
- **ForceField.jsx**: Main interactive visualization container
- **Layers**:
  - HexagonLayer: PESTLE sector backgrounds
  - DomainVenn: 3 overlapping domain circles
  - PESTLERing: Force labels around perimeter
  - ForceArcs: Connection lines on hover/selection
  - TensionNodes: Interactive tension points
- **UI Components**:
  - HoverInfoBox: Tooltip on node hover
  - InfoWindow: Detail panel for selected tensions
  - Legend: Color key for forces and domains
- **Data Files**:
  - navigatorData.js: PESTLE force definitions
  - tensionData.js: 8 core tensions with metadata
  - tensionPositions.js: Precise x/y coordinates for nodes

### Horizon Visualizations
- **HorizonHeatmap.jsx**: Industry sector intensity matrix
- **HorizonVisualization.jsx**: Framework diagrams and visuals

## Horizon 2030 Navigator (v3.0 - Force Field Visualization)
- **Layered architecture**: 5 distinct SVG layers for clear visual hierarchy
  - Layer 1: Hexagon sectors (PESTLE) with subtle fills
  - Layer 2: Domain Venn diagram (3 overlapping circles)
  - Layer 3: PESTLE ring labels
  - Layer 4: Force arcs (on hover/selection)
  - Layer 5: Tension nodes with smooth interactions
- **Apple-like interactions**: Theatrical animations with cubic-bezier(0.16, 1, 0.3, 1) easing
- **Precision positioning**: All elements manually positioned for perfect alignment
- **Smart hover states**: Glow rings, smooth scaling, delayed tooltips
- **Responsive canvas**: 1000×1000px viewBox in bordered container
- **Component separation**: Each layer isolated for maintainability
- **Color system**: PESTLE forces with distinct colors, coordinated sector fills
- **Interaction polish**: 24px hit areas, 0.3s transitions, theatrical timing

## Horizon 2030 Marketing Page (v1.0)
- **Long-form storytelling**: Hero with video backgrounds, scrolling narrative sections
- **Featured tension deep dive**: Full breakdown of Personalization vs. Privacy
- **Industry heatmap**: McKinsey-style matrix showing tension intensity by sector
- **Full-width dark bar**: Heatmap displayed in full-width dark section with coral/sage intensity colors
- **Framework visualization**: Static image integration on right side, explanatory copy on left
- **Email gate**: Lead capture for accessing complete 8-tension framework
- **CTA with brand colors**: Gradient button (coral to sage) for dialogue booking
- **Video integration**: YouTube embeds for atmospheric backgrounds