shah-in-alam/celler--webpage

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.