mj0077/bmw-home

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.