# sos-ina/pixoul architecture

> Architecture diagram of the GitHub repository sos-ina/pixoul, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sos-ina/pixoul
- Repository: https://github.com/sos-ina/pixoul

## Overview

Pixoul is a public-facing gaming and events website: visitors discover VR and other gaming experiences, browse venue and event offerings, and can initiate session booking. The sampled code is a Next.js presentation layer, with client-side session-cart state and route helpers rather than a demonstrated booking backend. The graph includes the documented-by-route experience, events, story, community, and virtual-tour areas; links for unsampled pages are omitted where their implementation relationships are not evidenced.

Main entry points: [`app/page.jsx`](https://github.com/sos-ina/pixoul/blob/main/app/page.jsx) (Home Page), [`app/events`](https://github.com/sos-ina/pixoul/tree/main/app/events) (Event Pages), [`components/ui/BookNowButton.jsx`](https://github.com/sos-ina/pixoul/blob/main/components/ui/BookNowButton.jsx) (Booking Button), [`app/experience`](https://github.com/sos-ina/pixoul/tree/main/app/experience) (Experience Catalogs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Site Discovery"]
  node_home["Home Page<br/>[page.jsx]"]
  node_virtualtour["Virtual Tour<br/>[page.jsx]"]
  node_navbar["Site Navigation<br/>[Navbar.jsx]"]
end

subgraph group_experiences["Gaming Experiences"]
  node_catalog["Experience Catalogs"]
  node_vrstory["VR Story<br/>[page.jsx]"]
  node_storyviews["Story Content Views"]
  node_gamegrid["Game Grid<br/>[GameGrid.jsx]"]
  node_gamecard["Game Card<br/>[GameCard.jsx]"]
  node_storypreview["Story Preview<br/>[VRStoryPreview.jsx]"]
end

subgraph group_events["Events &amp; Community"]
  node_eventpages["Event Pages"]
  node_eventtypes["Event Type Grid<br/>[EventTypeGrid.jsx]"]
  node_community["Community Pages"]
end

subgraph group_booking["Booking &amp; Navigation"]
  node_sessionpage["Session Page<br/>[page.jsx]"]
  node_sessioncart["Session Cart State"]
  node_addsession["Add to Session<br/>[AddToSession.jsx]"]
  node_bookbutton["Booking Button<br/>[BookNowButton.jsx]"]
  node_routes["Route Helpers<br/>[routes.js]"]
end

subgraph group_presentation["Shared Presentation"]
  node_hero["Hero Section<br/>[Hero.jsx]"]
  node_cta["Call to Action<br/>[CTA.jsx]"]
  node_title["Page Title<br/>[Title.jsx]"]
  node_stats["Stats Grid<br/>[StatGrid.jsx]"]
  node_explore["Explore Grid<br/>[ExploreGrid.jsx]"]
  node_carousel["Image Carousel<br/>[ImageCarousel.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_stats
node_home -->|"renders"| node_explore
node_home -->|"renders"| node_carousel
node_home -->|"renders"| node_cta
node_home -->|"renders"| node_bookbutton
node_home -->|"renders"| node_title
node_catalog -->|"renders"| node_gamegrid
node_catalog -->|"renders"| node_hero
node_catalog -->|"renders"| node_cta
node_catalog -->|"renders"| node_storypreview
node_vrstory -->|"renders"| node_storyviews
node_vrstory -->|"renders"| node_hero
node_gamegrid -->|"renders"| node_gamecard
node_gamecard -->|"renders"| node_bookbutton
node_gamecard -->|"renders"| node_addsession
node_gamecard -->|"uses"| node_routes
node_eventpages -->|"renders"| node_eventtypes
node_eventpages -->|"renders"| node_hero
node_eventpages -->|"renders"| node_bookbutton
node_eventpages -->|"renders"| node_cta
node_eventpages -->|"renders"| node_stats
node_eventpages -->|"renders"| node_carousel
node_sessionpage -->|"uses"| node_sessioncart
node_addsession -->|"uses"| node_sessioncart
node_bookbutton -->|"uses"| node_routes
node_explore -.->|"renders cards for"| node_home
node_navbar -->|"renders"| node_bookbutton
node_navbar -->|"uses"| node_sessioncart
node_navbar -.->|"serves navigation"| node_visitor

click node_home "https://github.com/sos-ina/pixoul/blob/main/app/page.jsx"
click node_virtualtour "https://github.com/sos-ina/pixoul/blob/main/app/virtual-tour/page.jsx"
click node_navbar "https://github.com/sos-ina/pixoul/blob/main/components/layout/Navbar.jsx"
click node_catalog "https://github.com/sos-ina/pixoul/tree/main/app/experience"
click node_vrstory "https://github.com/sos-ina/pixoul/blob/main/app/experience/vr/story/page.jsx"
click node_storyviews "https://github.com/sos-ina/pixoul/tree/main/components/story"
click node_gamegrid "https://github.com/sos-ina/pixoul/blob/main/components/vr/GameGrid.jsx"
click node_gamecard "https://github.com/sos-ina/pixoul/blob/main/components/vr/GameCard.jsx"
click node_storypreview "https://github.com/sos-ina/pixoul/blob/main/components/vr/VRStoryPreview.jsx"
click node_eventpages "https://github.com/sos-ina/pixoul/tree/main/app/events"
click node_eventtypes "https://github.com/sos-ina/pixoul/blob/main/components/events/EventTypeGrid.jsx"
click node_community "https://github.com/sos-ina/pixoul/tree/main/app/community"
click node_sessionpage "https://github.com/sos-ina/pixoul/blob/main/app/session/page.jsx"
click node_sessioncart "https://github.com/sos-ina/pixoul/blob/main/components/cart/SessionCartProvider.jsx"
click node_addsession "https://github.com/sos-ina/pixoul/blob/main/components/cart/AddToSession.jsx"
click node_bookbutton "https://github.com/sos-ina/pixoul/blob/main/components/ui/BookNowButton.jsx"
click node_routes "https://github.com/sos-ina/pixoul/blob/main/lib/routes.js"
click node_hero "https://github.com/sos-ina/pixoul/blob/main/components/ui/Hero.jsx"
click node_cta "https://github.com/sos-ina/pixoul/blob/main/components/ui/CTA.jsx"
click node_title "https://github.com/sos-ina/pixoul/blob/main/components/ui/Title.jsx"
click node_stats "https://github.com/sos-ina/pixoul/blob/main/components/ui/StatGrid.jsx"
click node_explore "https://github.com/sos-ina/pixoul/blob/main/components/ui/ExploreGrid.jsx"
click node_carousel "https://github.com/sos-ina/pixoul/blob/main/components/ui/ImageCarousel.jsx"

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_home,node_virtualtour,node_navbar toneBlue
class node_catalog,node_vrstory,node_storyviews,node_gamegrid,node_gamecard,node_storypreview toneAmber
class node_eventpages,node_eventtypes,node_community toneMint
class node_sessionpage,node_sessioncart,node_addsession,node_bookbutton,node_routes toneRose
class node_hero,node_cta,node_title,node_stats,node_explore,node_carousel,node_visitor toneIndigo
```

## Components

### Site Discovery

- [Home Page](https://github.com/sos-ina/pixoul/blob/main/app/page.jsx): `app/page.jsx`
- [Virtual Tour](https://github.com/sos-ina/pixoul/blob/main/app/virtual-tour/page.jsx): `app/virtual-tour/page.jsx`
- [Site Navigation](https://github.com/sos-ina/pixoul/blob/main/components/layout/Navbar.jsx): `components/layout/Navbar.jsx`

### Gaming Experiences

- [Experience Catalogs](https://github.com/sos-ina/pixoul/tree/main/app/experience): `app/experience`
- [VR Story](https://github.com/sos-ina/pixoul/blob/main/app/experience/vr/story/page.jsx): `app/experience/vr/story/page.jsx`
- [Story Content Views](https://github.com/sos-ina/pixoul/tree/main/components/story): `components/story`
- [Game Grid](https://github.com/sos-ina/pixoul/blob/main/components/vr/GameGrid.jsx): `components/vr/GameGrid.jsx`
- [Game Card](https://github.com/sos-ina/pixoul/blob/main/components/vr/GameCard.jsx): `components/vr/GameCard.jsx`
- [Story Preview](https://github.com/sos-ina/pixoul/blob/main/components/vr/VRStoryPreview.jsx): `components/vr/VRStoryPreview.jsx`

### Events & Community

- [Event Pages](https://github.com/sos-ina/pixoul/tree/main/app/events): `app/events`
- [Event Type Grid](https://github.com/sos-ina/pixoul/blob/main/components/events/EventTypeGrid.jsx): `components/events/EventTypeGrid.jsx`
- [Community Pages](https://github.com/sos-ina/pixoul/tree/main/app/community): `app/community`

### Booking & Navigation

- [Session Page](https://github.com/sos-ina/pixoul/blob/main/app/session/page.jsx): `app/session/page.jsx`
- [Session Cart State](https://github.com/sos-ina/pixoul/blob/main/components/cart/SessionCartProvider.jsx): `components/cart/SessionCartProvider.jsx`
- [Add to Session](https://github.com/sos-ina/pixoul/blob/main/components/cart/AddToSession.jsx): `components/cart/AddToSession.jsx`
- [Booking Button](https://github.com/sos-ina/pixoul/blob/main/components/ui/BookNowButton.jsx): `components/ui/BookNowButton.jsx`
- [Route Helpers](https://github.com/sos-ina/pixoul/blob/main/lib/routes.js): `lib/routes.js`

### Shared Presentation

- [Hero Section](https://github.com/sos-ina/pixoul/blob/main/components/ui/Hero.jsx): `components/ui/Hero.jsx`
- [Call to Action](https://github.com/sos-ina/pixoul/blob/main/components/ui/CTA.jsx): `components/ui/CTA.jsx`
- [Page Title](https://github.com/sos-ina/pixoul/blob/main/components/ui/Title.jsx): `components/ui/Title.jsx`
- [Stats Grid](https://github.com/sos-ina/pixoul/blob/main/components/ui/StatGrid.jsx): `components/ui/StatGrid.jsx`
- [Explore Grid](https://github.com/sos-ina/pixoul/blob/main/components/ui/ExploreGrid.jsx): `components/ui/ExploreGrid.jsx`
- [Image Carousel](https://github.com/sos-ina/pixoul/blob/main/components/ui/ImageCarousel.jsx): `components/ui/ImageCarousel.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home Page: opens (evidence: `app/page.jsx`)
- Home Page → Hero Section: renders (evidence: `app/page.jsx`)
- Home Page → Stats Grid: renders (evidence: `app/page.jsx`)
- Home Page → Explore Grid: renders (evidence: `app/page.jsx`)
- Home Page → Image Carousel: renders (evidence: `app/page.jsx`)
- Home Page → Call to Action: renders (evidence: `app/page.jsx`)
- Home Page → Booking Button: renders (evidence: `app/page.jsx`)
- Home Page → Page Title: renders (evidence: `app/page.jsx`)
- Experience Catalogs → Game Grid: renders (evidence: `app/experience/vr/page.jsx`)
- Experience Catalogs → Hero Section: renders (evidence: `app/experience/vr/page.jsx`)
- Experience Catalogs → Call to Action: renders (evidence: `app/experience/vr/page.jsx`)
- Experience Catalogs → Story Preview: renders (evidence: `app/experience/vr/page.jsx`)
- VR Story → Story Content Views: renders (evidence: `app/experience/vr/story/page.jsx`)
- VR Story → Hero Section: renders (evidence: `app/experience/vr/story/page.jsx`)
- Game Grid → Game Card: renders (evidence: `components/vr/GameGrid.jsx`)
- Game Card → Booking Button: renders (evidence: `components/vr/GameCard.jsx`)
- Game Card → Add to Session: renders (evidence: `components/vr/GameCard.jsx`)
- Game Card → Route Helpers: uses (evidence: `components/vr/GameCard.jsx`)
- Event Pages → Event Type Grid: renders (evidence: `app/events/hall/page.jsx`)
- Event Pages → Hero Section: renders (evidence: `app/events/hall/page.jsx`)
- Event Pages → Booking Button: renders (evidence: `app/events/hall/page.jsx`)
- Event Pages → Call to Action: renders (evidence: `app/events/hall/page.jsx`)
- Event Pages → Stats Grid: renders (evidence: `app/events/hall/page.jsx`)
- Event Pages → Image Carousel: renders (evidence: `app/events/hall/page.jsx`)
- Session Page → Session Cart State: uses (evidence: `app/session/page.jsx`)
- Add to Session → Session Cart State: uses (evidence: `components/cart/AddToSession.jsx`)
- Booking Button → Route Helpers: uses (evidence: `components/ui/BookNowButton.jsx`)
- Explore Grid → Home Page: renders cards for (evidence: `app/page.jsx`)
- Site Navigation → Booking Button: renders (evidence: `components/layout/Navbar.jsx`)
- Site Navigation → Session Cart State: uses (evidence: `components/layout/Navbar.jsx`)
- Site Navigation → Visitor: serves navigation