# shah-in-alam/celler--webpage architecture

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

- Interactive diagram: https://gitdiagram.com/shah-in-alam/celler--webpage
- Repository: https://github.com/shah-in-alam/celler--webpage

## Overview

1. **Project shape:** This is a **single-page React site** for a neighbourhood wine shop, built with **Vite** and shipped as a **static frontend**. There is no visible backend, database, or API layer in the repo; everything is content-driven on the client.

2. **Entry and app shell:** `index.html` hosts the Vite app, `src/main.jsx` mounts it, and `src/App.jsx` acts as the composition root. The app likely orchestrates the page’s global state such as language selection, modal visibility, and the age-gate state.

3. **Page composition:** The UI is assembled from section components in `src/components/` rather than nested route pages. The main sections are **Hero, About, Wine selection, Shop, Events, Reviews, Visit, Footer**, with `Nav` providing in-page navigation to anchors.

4. **Content/data boundary:** The site separates **structured content** from presentation. `src/i18n.jsx` contains the bilingual copy for EN/NL, while `src/data/wines.js` holds the wine catalogue data. This means most copy updates and product edits can happen without touching component logic.

5. **Wine catalogue flow:** `WineSelection.jsx`, `Bottle.jsx`, and `Shop.jsx` form the product-facing subsystem. The wine data from `src/data/wines.js` is rendered into cards/selection UI, and the shop area presents the purchasing or pickup message around those items.

6. **Age-gated shop experience:** `AgeGate.jsx` is a distinct boundary around the wine-shop section. The README says the 18+ check is remembered via `localStorage`, so the gate is client-side and persistent across visits, protecting only the alcohol-related parts of the experience.

7. **Modal-driven interactions:** `BookingModal.jsx` and `ShopModal.jsx` indicate overlay-based interactions rather than full page navigation. These modals likely handle booking/pickup/shop calls-to-action, keeping the user inside the single-page flow.

8. **Narrative and visual sections:** `Hero.jsx`, `About.jsx`, `Events.jsx`, `Reviews.jsx`, and `Visit.jsx` are the content-heavy marketing/brand sections. `About` also appears to include a replaceable photo slot, while `Visit` concentrates address, hours, contact links, social links, and map entry points.

9. **Shared UI and motion system:** Components like `SectionHead.jsx`, `Reveal.jsx`, `Calendar.jsx`, and `Confetti.jsx` suggest reusable presentation primitives and light interaction effects. `Reveal` and the README’s reduced-motion note imply animation is intentionally optional and accessibility-aware.

10. **Styling and assets:** Styling is centralized in `src/styles.css` with no CSS framework. Static media lives under `public/images`, supporting a brand-heavy, image-led layout.

11. **Accessibility and UX constraints:** The README calls out a **skip link, keyboard focus visibility, semantic landmarks, high-contrast colors, and `prefers-reduced-motion` support**. That means the architecture is not just visual composition; it also enforces accessibility as a first-class concern across sections.

12. **Operational/tooling boundary:** The only repo-level automation shown is **GitHub Actions CodeQL scanning** in `.github/workflows/codeql.yml`. This is a security/static-analysis boundary around the frontend codebase, not a runtime dependency.

13. **External touchpoints:** The public-facing integrations are lightweight: **map URL**, **phone/email links**, and **Instagram** in the Visit section. There is no evidence of an external CMS, booking backend, or commerce engine in the repository.

14. **Diagram takeaway:** The cleanest architecture diagram is a **client-only SPA** with one app shell, two main data sources (`i18n` content and wine data), a gated shop flow, and several presentational sections rendered in-page with shared styling and small interaction helpers.

Main entry points: [`src/App.jsx`](https://github.com/shah-in-alam/celler--webpage/blob/main/src/App.jsx) (App), [`src/components/SectionHead.jsx`](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/SectionHead.jsx) (SectionHead), [`src/components/WineSelection.jsx`](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/WineSelection.jsx) (WineSelection), [`src/components/Hero.jsx`](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Hero.jsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App shell"]
  node_node_index_html["index.html<br/>Vite entry<br/>[index.html]"]
  node_node_main["main<br/>React bootstrap<br/>[main.jsx]"]
  node_node_app["App<br/>composition root<br/>[App.jsx]"]
end

subgraph group_group_content["Content sources"]
  node_node_i18n["Copy<br/>bilingual content<br/>[i18n.jsx]"]
  node_node_wines_data["Wines<br/>catalog data<br/>[wines.js]"]
end

subgraph group_group_sections["Page sections"]
  node_node_nav["Nav<br/>[Nav.jsx]"]
  node_node_hero["Hero<br/>landing section<br/>[Hero.jsx]"]
  node_node_about["About<br/>story section<br/>[About.jsx]"]
  node_node_events["Events<br/>[Events.jsx]"]
  node_node_reviews["Reviews<br/>social proof<br/>[Reviews.jsx]"]
  node_node_visit["Visit<br/>contact section<br/>[Visit.jsx]"]
  node_node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_group_shop["Shop flow"]
  node_node_agegate["AgeGate<br/>18+ gate<br/>[AgeGate.jsx]"]
  node_node_wineselection["WineSelection<br/>catalog view<br/>[WineSelection.jsx]"]
  node_node_bottle["Bottle<br/>product card<br/>[Bottle.jsx]"]
  node_node_shop["Shop<br/>[Shop.jsx]"]
  node_node_bookingmodal["BookingModal<br/>overlay dialog<br/>[BookingModal.jsx]"]
  node_node_shopmodal["ShopModal<br/>overlay dialog<br/>[ShopModal.jsx]"]
end

subgraph group_group_shared["Shared UI"]
  node_node_sectionhead["SectionHead<br/>section heading<br/>[SectionHead.jsx]"]
  node_node_reveal["Reveal<br/>motion helper<br/>[Reveal.jsx]"]
  node_node_calendar["Calendar<br/>schedule UI<br/>[Calendar.jsx]"]
  node_node_confetti(("Confetti<br/>decorative effect<br/>[Confetti.jsx]"))
end

subgraph group_group_ops["Tooling"]
  node_node_codeql["CodeQL<br/>security workflow<br/>[codeql.yml]"]
end

node_node_index_html -->|"loads"| node_node_main
node_node_main -->|"mounts"| node_node_app
node_node_app -->|"composes"| node_node_nav
node_node_app -->|"renders"| node_node_hero
node_node_app -->|"renders"| node_node_about
node_node_app -->|"renders"| node_node_wineselection
node_node_app -->|"renders"| node_node_shop
node_node_app -->|"renders"| node_node_events
node_node_app -->|"renders"| node_node_reviews
node_node_app -->|"renders"| node_node_visit
node_node_app -->|"renders"| node_node_footer
node_node_app -->|"guards"| node_node_agegate
node_node_app -->|"opens"| node_node_bookingmodal
node_node_app -->|"opens"| node_node_shopmodal
node_node_app -->|"reads"| node_node_i18n
node_node_wineselection -->|"maps"| node_node_wines_data
node_node_wineselection -->|"uses"| node_node_bottle
node_node_shop -->|"embeds"| node_node_wineselection
node_node_shop -->|"triggers"| node_node_shopmodal
node_node_events -->|"uses"| node_node_calendar
node_node_about -->|"wraps"| node_node_reveal
node_node_hero -->|"decorates"| node_node_confetti
node_node_hero -->|"shares"| node_node_sectionhead
node_node_about -->|"shares"| node_node_sectionhead
node_node_events -->|"shares"| node_node_sectionhead
node_node_reviews -->|"shares"| node_node_sectionhead
node_node_visit -->|"shares"| node_node_sectionhead
node_node_codeql -.->|"scans"| node_node_app

click node_node_index_html "https://github.com/shah-in-alam/celler--webpage/blob/main/index.html"
click node_node_main "https://github.com/shah-in-alam/celler--webpage/blob/main/src/main.jsx"
click node_node_app "https://github.com/shah-in-alam/celler--webpage/blob/main/src/App.jsx"
click node_node_i18n "https://github.com/shah-in-alam/celler--webpage/blob/main/src/i18n.jsx"
click node_node_wines_data "https://github.com/shah-in-alam/celler--webpage/blob/main/src/data/wines.js"
click node_node_nav "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Nav.jsx"
click node_node_hero "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Hero.jsx"
click node_node_about "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/About.jsx"
click node_node_events "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Events.jsx"
click node_node_reviews "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Reviews.jsx"
click node_node_visit "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Visit.jsx"
click node_node_footer "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Footer.jsx"
click node_node_agegate "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/AgeGate.jsx"
click node_node_wineselection "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/WineSelection.jsx"
click node_node_bottle "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Bottle.jsx"
click node_node_shop "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Shop.jsx"
click node_node_bookingmodal "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/BookingModal.jsx"
click node_node_shopmodal "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/ShopModal.jsx"
click node_node_sectionhead "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/SectionHead.jsx"
click node_node_reveal "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Reveal.jsx"
click node_node_calendar "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Calendar.jsx"
click node_node_confetti "https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Confetti.jsx"
click node_node_codeql "https://github.com/shah-in-alam/celler--webpage/blob/main/.github/workflows/codeql.yml"

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_node_index_html,node_node_main,node_node_app toneBlue
class node_node_i18n,node_node_wines_data toneAmber
class node_node_nav,node_node_hero,node_node_about,node_node_events,node_node_reviews,node_node_visit,node_node_footer toneMint
class node_node_agegate,node_node_wineselection,node_node_bottle,node_node_shop,node_node_bookingmodal,node_node_shopmodal toneRose
class node_node_sectionhead,node_node_reveal,node_node_calendar,node_node_confetti toneIndigo
class node_node_codeql toneTeal
```

## Components

### App shell

Vite entry and root composition for the single-page site

- [index.html](https://github.com/shah-in-alam/celler--webpage/blob/main/index.html): Vite entry · HTML host for the client app · `index.html`
- [main](https://github.com/shah-in-alam/celler--webpage/blob/main/src/main.jsx): React bootstrap · Mounts the React app into the page · `src/main.jsx`
- [App](https://github.com/shah-in-alam/celler--webpage/blob/main/src/App.jsx): composition root · Top-level site orchestration and state · `src/App.jsx`

### Content sources

Structured copy and product data kept separate from components

- [Copy](https://github.com/shah-in-alam/celler--webpage/blob/main/src/i18n.jsx): bilingual content · EN/NL site copy and structured text · `src/i18n.jsx`
- [Wines](https://github.com/shah-in-alam/celler--webpage/blob/main/src/data/wines.js): catalog data · Wine catalogue content used by the shop · `src/data/wines.js`

### Page sections

In-page marketing and information sections rendered from the app shell

- [Nav](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Nav.jsx): anchor nav · In-page navigation across site sections · `src/components/Nav.jsx`
- [Hero](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Hero.jsx): landing section · Top-of-page brand introduction · `src/components/Hero.jsx`
- [About](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/About.jsx): story section · Background and replaceable photo-driven content · `src/components/About.jsx`
- [Events](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Events.jsx): events section · Upcoming happenings and related content · `src/components/Events.jsx`
- [Reviews](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Reviews.jsx): social proof · Customer quotes and endorsements · `src/components/Reviews.jsx`
- [Visit](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Visit.jsx): contact section · Address, hours, contact, map, and social links · `src/components/Visit.jsx`
- [Footer](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Footer.jsx): site footer · Closing site-wide information and links · `src/components/Footer.jsx`

### Shop flow

Age-gated product browsing and modal-driven purchase interactions

- [AgeGate](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/AgeGate.jsx): 18+ gate · Client-side age check remembered in localStorage · `src/components/AgeGate.jsx`
- [WineSelection](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/WineSelection.jsx): catalog view · Renders wines into selection cards · `src/components/WineSelection.jsx`
- [Bottle](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Bottle.jsx): product card · Individual wine item presentation · `src/components/Bottle.jsx`
- [Shop](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Shop.jsx): shop section · Purchase or pickup messaging around wines · `src/components/Shop.jsx`
- [BookingModal](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/BookingModal.jsx): overlay dialog · Modal for booking-related calls to action · `src/components/BookingModal.jsx`
- [ShopModal](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/ShopModal.jsx): overlay dialog · Modal for shop or checkout interactions · `src/components/ShopModal.jsx`

### Shared UI

Reusable presentation and motion primitives used across sections

- [SectionHead](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/SectionHead.jsx): section heading · Reusable section title and lead component · `src/components/SectionHead.jsx`
- [Reveal](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Reveal.jsx): motion helper · Accessible reveal animation wrapper · `src/components/Reveal.jsx`
- [Calendar](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Calendar.jsx): schedule UI · Calendar-style event presentation helper · `src/components/Calendar.jsx`
- [Confetti](https://github.com/shah-in-alam/celler--webpage/blob/main/src/components/Confetti.jsx): decorative effect · Light celebratory visual effect · `src/components/Confetti.jsx`

### Tooling

Repository-level automation and checks

- [CodeQL](https://github.com/shah-in-alam/celler--webpage/blob/main/.github/workflows/codeql.yml): security workflow · GitHub Actions static analysis for the frontend repo · `.github/workflows/codeql.yml`

## Connections

- index.html → main: loads · Browser host loads the Vite entry
- main → App: mounts · Entry bootstrap renders the app shell
- App → Nav: composes · App shell includes navigation
- App → Hero: renders · Top-level page composition
- App → About: renders · Top-level page composition
- App → WineSelection: renders · Top-level page composition
- App → Shop: renders · Top-level page composition
- App → Events: renders · Top-level page composition
- App → Reviews: renders · Top-level page composition
- App → Visit: renders · Top-level page composition
- App → Footer: renders · Top-level page composition
- App → AgeGate: guards · Age check wraps alcohol-related experience
- App → BookingModal: opens · Manages booking overlay state
- App → ShopModal: opens · Manages shop overlay state
- App → Copy: reads · Consumes bilingual site copy
- WineSelection → Wines: maps · Selection view is driven by catalogue data
- WineSelection → Bottle: uses · Wine cards are built from bottle component
- Shop → WineSelection: embeds · Shop section contains the product selection flow
- Shop → ShopModal: triggers · Shop calls to action open modal interactions
- Events → Calendar: uses · Events section uses calendar presentation
- About → Reveal: wraps · Section content animates with reveal helper
- Hero → Confetti: decorates · Hero uses decorative celebratory effect
- Hero → SectionHead: shares · Uses common section heading pattern
- About → SectionHead: shares · Uses common section heading pattern
- Events → SectionHead: shares · Uses common section heading pattern
- Reviews → SectionHead: shares · Uses common section heading pattern
- Visit → SectionHead: shares · Uses common section heading pattern
- CodeQL → App: scans · Workflow covers the frontend codebase