# mj0077/bmw-home architecture

> Architecture diagram of the GitHub repository mj0077/bmw-home, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mj0077/bmw-home
- Repository: https://github.com/mj0077/bmw-home

## Overview

1. This repository is a Next.js App Router project that renders a mostly static, visually rich landing page. The top-level application entrypoints are `src/app/layout.tsx` and `src/app/page.tsx`, with global styling in `src/app/globals.css`.

2. The architecture is component-driven: the page is assembled from a small set of focused UI sections under `src/components/`. Each component appears to represent one visible region of the marketing site rather than a shared business domain.

3. The main page content is split into recognizable layout blocks: `Navbar`, `HeroVideo` or `HeroCanvas`, `BrandPillars`, `HighlightCards`, `ModelLineup`, `Footer`, plus an alternative `SpotlightCanvas`. This suggests the page is composed from sequential visual sections with strong hero/feature/collection storytelling.

4. The interaction layer is lightweight and likely client-side only where needed. Components such as `NavigationDrawer`, `HeroCanvas`, `HeroVideo`, and `SpotlightCanvas` imply responsive navigation and animated/interactive media presentation rather than data-heavy state management or backend orchestration.

5. Media is a core subsystem. The `public/` tree contains large binary assets such as `public/bmw.mp4`, image folders, and sequence folders (`public/sequence1`, `public/sequence2`). These assets are served directly by Next.js and are likely consumed by the hero and canvas-driven sections.

6. Frame-sequence rendering is explicitly supported by `src/components/hooks/useFrameSequence.ts`, with additional frame assets in `frames/video1` and `frames/video2`. That indicates a pipeline where image sequences are used for scroll/canvas animation or video-like playback in the UI.

7. There is a small build-time asset conversion utility in `scripts/convert-images.mjs`. This suggests the repo includes a preprocessing step for preparing image assets, likely to generate optimized sequence frames or standardized media inputs for the front-end components.

8. Type boundaries are minimal but present. `src/types/index.ts` centralizes shared TypeScript types, which likely keeps the component props and media-related structures consistent across the UI sections.

9. The project uses standard Next.js and PostCSS tooling, with TypeScript configuration in `tsconfig.json` and linting via `eslint.config.mjs`. This points to a conventional front-end build pipeline rather than custom server infrastructure.

10. There does not appear to be a separate API layer, database, or external service integration in the repository tree. The architecture is primarily presentation plus static asset delivery, with all runtime behavior happening in the browser and via Next.js page rendering.

11. For an architecture diagram, the most important boundary is between the App Router page shell and the media-backed feature components. The data flow is: static assets in `public/` and `frames/` feed the canvas/video components, which are composed into the main page by `src/app/page.tsx`.

12. In short, this is a media-centric Next.js marketing site with a modular section layout, a small amount of client-side animation logic, and a supporting asset-preparation script rather than a traditional multi-layer application backend.

Main entry points: [`src/app/page.tsx`](https://github.com/mj0077/bmw-home/blob/main/src/app/page.tsx) (Home Page), [`src/types/index.ts`](https://github.com/mj0077/bmw-home/blob/main/src/types/index.ts) (Shared Types), [`scripts/convert-images.mjs`](https://github.com/mj0077/bmw-home/blob/main/scripts/convert-images.mjs) (Image Converter), [`src/components/HeroCanvas.tsx`](https://github.com/mj0077/bmw-home/blob/main/src/components/HeroCanvas.tsx) (Hero Canvas)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app_shell["App Shell"]
  node_layout["Layout<br/>[layout.tsx]"]
  node_page["Home Page<br/>Next page<br/>[page.tsx]"]
  node_globals["Global CSS<br/>Stylesheet<br/>[globals.css]"]
end

subgraph group_sections["UI Sections"]
  node_navbar["Navbar<br/>UI section<br/>[Navbar.tsx]"]
  node_drawer["Drawer<br/>UI interaction"]
  node_hero_canvas(("Hero Canvas<br/>Interactive hero<br/>[HeroCanvas.tsx]"))
  node_hero_video["Hero Video<br/>Media hero<br/>[HeroVideo.tsx]"]
  node_spotlight(("Spotlight Canvas<br/>Interactive feature"))
  node_pillars["Brand Pillars<br/>Content block<br/>[BrandPillars.tsx]"]
  node_cards["Highlight Cards<br/>Content block<br/>[HighlightCards.tsx]"]
  node_lineup["Model Lineup<br/>Gallery section<br/>[ModelLineup.tsx]"]
  node_footer["Footer<br/>UI section<br/>[Footer.tsx]"]
end

subgraph group_media["Media Assets"]
  node_video_asset[("BMW Video<br/>Static video<br/>[bmw.mp4]")]
  node_brand_images[("Brand Images<br/>Static images")]
  node_model_images[("Model Images<br/>Static images")]
  node_sequence_public_1[("Sequence 1<br/>Frame sequence")]
  node_sequence_public_2[("Sequence 2<br/>Frame sequence")]
  node_frames_video1[("Video Frames 1<br/>Frame set")]
  node_frames_video2[("Video Frames 2<br/>Frame set")]
end

subgraph group_tooling["Tooling"]
  node_frames_hook["Frame Hook<br/>React hook"]
  node_types["Shared Types<br/>TypeScript types<br/>[index.ts]"]
  node_converter["Image Converter<br/>Asset script<br/>[convert-images.mjs]"]
end

node_layout -->|"renders"| node_page
node_layout -->|"loads"| node_globals
node_page -->|"composes"| node_navbar
node_page -->|"composes"| node_hero_canvas
node_page -->|"composes"| node_hero_video
node_page -->|"composes"| node_pillars
node_page -->|"composes"| node_cards
node_page -->|"composes"| node_lineup
node_page -->|"composes"| node_spotlight
node_page -->|"composes"| node_footer
node_navbar -->|"uses"| node_drawer
node_hero_canvas -->|"uses"| node_frames_hook
node_spotlight -->|"uses"| node_frames_hook
node_hero_video -->|"plays"| node_video_asset
node_hero_canvas -->|"renders"| node_sequence_public_1
node_spotlight -->|"renders"| node_sequence_public_2
node_frames_hook -->|"loads"| node_frames_video1
node_frames_hook -->|"loads"| node_frames_video2
node_converter -->|"processes"| node_brand_images
node_converter -->|"processes"| node_model_images
node_converter -->|"outputs"| node_frames_video1
node_converter -->|"outputs"| node_frames_video2
node_types -.->|"supports"| node_navbar
node_types -.->|"supports"| node_hero_canvas
node_types -.->|"supports"| node_hero_video
node_types -.->|"supports"| node_spotlight

click node_layout "https://github.com/mj0077/bmw-home/blob/main/src/app/layout.tsx"
click node_page "https://github.com/mj0077/bmw-home/blob/main/src/app/page.tsx"
click node_globals "https://github.com/mj0077/bmw-home/blob/main/src/app/globals.css"
click node_navbar "https://github.com/mj0077/bmw-home/blob/main/src/components/Navbar.tsx"
click node_drawer "https://github.com/mj0077/bmw-home/blob/main/src/components/NavigationDrawer.tsx"
click node_hero_canvas "https://github.com/mj0077/bmw-home/blob/main/src/components/HeroCanvas.tsx"
click node_hero_video "https://github.com/mj0077/bmw-home/blob/main/src/components/HeroVideo.tsx"
click node_spotlight "https://github.com/mj0077/bmw-home/blob/main/src/components/SpotlightCanvas.tsx"
click node_pillars "https://github.com/mj0077/bmw-home/blob/main/src/components/BrandPillars.tsx"
click node_cards "https://github.com/mj0077/bmw-home/blob/main/src/components/HighlightCards.tsx"
click node_lineup "https://github.com/mj0077/bmw-home/blob/main/src/components/ModelLineup.tsx"
click node_footer "https://github.com/mj0077/bmw-home/blob/main/src/components/Footer.tsx"
click node_frames_hook "https://github.com/mj0077/bmw-home/blob/main/src/components/hooks/useFrameSequence.ts"
click node_types "https://github.com/mj0077/bmw-home/blob/main/src/types/index.ts"
click node_converter "https://github.com/mj0077/bmw-home/blob/main/scripts/convert-images.mjs"
click node_video_asset "https://github.com/mj0077/bmw-home/blob/main/public/bmw.mp4"
click node_brand_images "https://github.com/mj0077/bmw-home/tree/main/public/images/brand"
click node_model_images "https://github.com/mj0077/bmw-home/tree/main/public/images/models"
click node_sequence_public_1 "https://github.com/mj0077/bmw-home/tree/main/public/sequence1"
click node_sequence_public_2 "https://github.com/mj0077/bmw-home/tree/main/public/sequence2"
click node_frames_video1 "https://github.com/mj0077/bmw-home/tree/main/frames/video1"
click node_frames_video2 "https://github.com/mj0077/bmw-home/tree/main/frames/video2"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_page,node_globals toneBlue
class node_navbar,node_drawer,node_hero_canvas,node_hero_video,node_spotlight,node_pillars,node_cards,node_lineup,node_footer toneAmber
class node_video_asset,node_brand_images,node_model_images,node_sequence_public_1,node_sequence_public_2,node_frames_video1,node_frames_video2 toneMint
class node_frames_hook,node_types,node_converter toneRose
```

## Components

### App Shell

Next.js App Router entrypoints and global styling

- [Layout](https://github.com/mj0077/bmw-home/blob/main/src/app/layout.tsx): Next layout · Root document shell and global providers · `src/app/layout.tsx`
- [Home Page](https://github.com/mj0077/bmw-home/blob/main/src/app/page.tsx): Next page · Assembles the landing page sections · `src/app/page.tsx`
- [Global CSS](https://github.com/mj0077/bmw-home/blob/main/src/app/globals.css): Stylesheet · App-wide visual baseline and theme rules · `src/app/globals.css`

### UI Sections

Composable landing-page regions

- [Navbar](https://github.com/mj0077/bmw-home/blob/main/src/components/Navbar.tsx): UI section · Top navigation for the landing page · `src/components/Navbar.tsx`
- [Drawer](https://github.com/mj0077/bmw-home/blob/main/src/components/NavigationDrawer.tsx): UI interaction · Responsive navigation drawer for smaller screens · `src/components/NavigationDrawer.tsx`
- [Hero Canvas](https://github.com/mj0077/bmw-home/blob/main/src/components/HeroCanvas.tsx): Interactive hero · Canvas-driven hero presentation and animation · `src/components/HeroCanvas.tsx`
- [Hero Video](https://github.com/mj0077/bmw-home/blob/main/src/components/HeroVideo.tsx): Media hero · Video-backed hero presentation · `src/components/HeroVideo.tsx`
- [Spotlight Canvas](https://github.com/mj0077/bmw-home/blob/main/src/components/SpotlightCanvas.tsx): Interactive feature · Secondary canvas-based spotlight section · `src/components/SpotlightCanvas.tsx`
- [Brand Pillars](https://github.com/mj0077/bmw-home/blob/main/src/components/BrandPillars.tsx): Content block · Feature/value proposition section · `src/components/BrandPillars.tsx`
- [Highlight Cards](https://github.com/mj0077/bmw-home/blob/main/src/components/HighlightCards.tsx): Content block · Promotional highlight grid or cards · `src/components/HighlightCards.tsx`
- [Model Lineup](https://github.com/mj0077/bmw-home/blob/main/src/components/ModelLineup.tsx): Gallery section · Collection-style model showcase · `src/components/ModelLineup.tsx`
- [Footer](https://github.com/mj0077/bmw-home/blob/main/src/components/Footer.tsx): UI section · Page footer and closing links · `src/components/Footer.tsx`

### Media Assets

Static images, video, and frame sequences served by Next.js

- [BMW Video](https://github.com/mj0077/bmw-home/blob/main/public/bmw.mp4): Static video · Primary video asset served from public · `public/bmw.mp4`
- [Brand Images](https://github.com/mj0077/bmw-home/tree/main/public/images/brand): Static images · Brand-related image assets · `public/images/brand`
- [Model Images](https://github.com/mj0077/bmw-home/tree/main/public/images/models): Static images · Model-related image assets · `public/images/models`
- [Sequence 1](https://github.com/mj0077/bmw-home/tree/main/public/sequence1): Frame sequence · Animated frame assets served from public · `public/sequence1`
- [Sequence 2](https://github.com/mj0077/bmw-home/tree/main/public/sequence2): Frame sequence · Animated frame assets served from public · `public/sequence2`
- [Video Frames 1](https://github.com/mj0077/bmw-home/tree/main/frames/video1): Frame set · Precomputed frame assets for sequence playback · `frames/video1`
- [Video Frames 2](https://github.com/mj0077/bmw-home/tree/main/frames/video2): Frame set · Precomputed frame assets for sequence playback · `frames/video2`

### Tooling

Build-time asset processing and shared types

- [Frame Hook](https://github.com/mj0077/bmw-home/blob/main/src/components/hooks/useFrameSequence.ts): React hook · Frame-sequence loading and playback logic · `src/components/hooks/useFrameSequence.ts`
- [Shared Types](https://github.com/mj0077/bmw-home/blob/main/src/types/index.ts): TypeScript types · Common interfaces used across components · `src/types/index.ts`
- [Image Converter](https://github.com/mj0077/bmw-home/blob/main/scripts/convert-images.mjs): Asset script · Build-time image processing utility · `scripts/convert-images.mjs`

## Connections

- Layout → Home Page: renders · Root layout wraps the home page
- Layout → Global CSS: loads · Global styling is applied from the app shell
- Home Page → Navbar: composes · Home page includes the navigation bar
- Home Page → Hero Canvas: composes · Home page can render the canvas hero
- Home Page → Hero Video: composes · Home page can render the video hero
- Home Page → Brand Pillars: composes · Home page includes the brand pillars section
- Home Page → Highlight Cards: composes · Home page includes highlight cards
- Home Page → Model Lineup: composes · Home page includes the model lineup section
- Home Page → Spotlight Canvas: composes · Home page includes the spotlight canvas section
- Home Page → Footer: composes · Home page closes with the footer
- Navbar → Drawer: uses · Navigation bar delegates responsive behavior to the drawer
- Hero Canvas → Frame Hook: uses · Canvas hero consumes frame-sequence playback logic
- Spotlight Canvas → Frame Hook: uses · Spotlight canvas also relies on frame sequencing
- Hero Video → BMW Video: plays · Video hero uses the BMW video asset
- Hero Canvas → Sequence 1: renders · Canvas hero can draw from public frame sequences
- Spotlight Canvas → Sequence 2: renders · Spotlight canvas can draw from a second public sequence
- Frame Hook → Video Frames 1: loads · Hook consumes frame assets from the prepared frame folders
- Frame Hook → Video Frames 2: loads · Hook consumes the second frame set
- Image Converter → Brand Images: processes · Asset script prepares image inputs
- Image Converter → Model Images: processes · Asset script prepares model imagery
- Image Converter → Video Frames 1: outputs · Script may generate or standardize frame sequences
- Image Converter → Video Frames 2: outputs · Script may generate or standardize frame sequences
- Shared Types → Navbar: supports · Shared types keep component props aligned
- Shared Types → Hero Canvas: supports · Shared types keep media-related props aligned
- Shared Types → Hero Video: supports · Shared types keep media-related props aligned
- Shared Types → Spotlight Canvas: supports · Shared types keep media-related props aligned