# aiclubvsa/greenstay-immersive-site architecture

> Architecture diagram of the GitHub repository aiclubvsa/greenstay-immersive-site, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aiclubvsa/greenstay-immersive-site
- Repository: https://github.com/aiclubvsa/greenstay-immersive-site

## Overview

The Green Stay is an immersive homestay website that guides prospective guests from discovering the estate and its rooms, activities, food and local attractions to sending a non-binding stay enquiry. The main experience is a scroll-led home page, alongside gallery, journal and nearby-attractions pages; booking enquiries are validated and appended to a local NDJSON file, with WhatsApp as a guest fallback. The README documents the scene choreography and reduced-motion behavior. Unsampled page and component internals are represented only where the tree and README identify their roles.

Main entry points: [`app/app/page.tsx`](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/page.tsx) (Immersive home), [`app/lib/scroll.ts`](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/scroll.ts) (Scroll progress), [`app/lib/site.ts`](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/site.ts) (Property and rates), [`app/components/Booking.tsx`](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Booking.tsx) (Booking form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Stay experience"]
  node_home["Immersive home<br/>[page.tsx]"]
  node_hero["Arrival scene<br/>[Hero.tsx]"]
  node_approach["House approach<br/>[Approach.tsx]"]
  node_rooms["Room journey<br/>[RoomJourney.tsx]"]
  node_pullback["Estate pullback<br/>[Pullback.tsx]"]
  node_forest["Forest experiences<br/>[Forest.tsx]"]
  node_dining["Meals and tariff<br/>[Table.tsx]"]
  node_stay["Stay details<br/>[Stay.tsx]"]
  node_scroll_engine["Scroll progress<br/>[scroll.ts]"]
  node_motion["Motion provider<br/>[MotionProvider.tsx]"]
end

subgraph group_discovery["Explore information"]
  node_gallery_page["Photo gallery<br/>[page.tsx]"]
  node_attractions_page["Nearby attractions<br/>[page.tsx]"]
  node_blogs_page["Field journal<br/>[page.tsx]"]
  node_page_shell["Page shell<br/>[PageShell.tsx]"]
end

subgraph group_enquiry["Stay enquiries"]
  node_booking["Booking form<br/>[Booking.tsx]"]
  node_booking_api["Enquiry endpoint<br/>[route.ts]"]
  node_enquiry_store[("Enquiry records")]
  node_whatsapp["WhatsApp fallback"]
  node_contacts["Contact details<br/>[page.tsx]"]
end

subgraph group_content["Property content"]
  node_explore_data["Explore content<br/>[explore.ts]"]
  node_site_data["Property and rates<br/>[site.ts]"]
end

node_guest(("Prospective guest"))
node_external_site(("Published photo source"))

node_guest -->|"views"| node_home
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_approach
node_home -->|"renders"| node_rooms
node_home -->|"renders"| node_pullback
node_home -->|"renders"| node_forest
node_home -->|"renders"| node_dining
node_home -->|"renders"| node_stay
node_home -->|"renders"| node_booking
node_scroll_engine -->|"updates progress"| node_hero
node_scroll_engine -->|"updates progress"| node_approach
node_scroll_engine -->|"updates progress"| node_rooms
node_scroll_engine -->|"updates progress"| node_pullback
node_scroll_engine -->|"updates progress"| node_forest
node_rooms -->|"reads rooms"| node_site_data
node_forest -->|"reads activities"| node_site_data
node_dining -->|"reads inclusions"| node_site_data
node_stay -->|"reads property"| node_site_data
node_booking -->|"reads rates and rooms"| node_site_data
node_booking -->|"posts enquiry"| node_booking_api
node_booking -.->|"offers fallback"| node_whatsapp
node_booking_api -->|"checks rooms"| node_site_data
node_booking_api -->|"appends enquiry"| node_enquiry_store
node_guest -->|"opens"| node_gallery_page
node_guest -->|"opens"| node_attractions_page
node_guest -->|"opens"| node_blogs_page
node_guest -->|"opens"| node_contacts
node_contacts -->|"uses"| node_page_shell
node_gallery_page -->|"uses"| node_page_shell
node_attractions_page -->|"uses"| node_page_shell
node_blogs_page -->|"uses"| node_page_shell
node_gallery_page -->|"reads gallery"| node_explore_data
node_attractions_page -->|"reads attractions"| node_explore_data
node_blogs_page -->|"reads posts"| node_explore_data
node_contacts -->|"renders form"| node_booking
node_explore_data -.->|"references photos"| node_external_site
node_motion -->|"provides motion context"| node_home

click node_home "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/page.tsx"
click node_hero "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Hero.tsx"
click node_approach "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Approach.tsx"
click node_rooms "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/RoomJourney.tsx"
click node_pullback "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Pullback.tsx"
click node_forest "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Forest.tsx"
click node_dining "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Table.tsx"
click node_stay "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Stay.tsx"
click node_booking "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Booking.tsx"
click node_booking_api "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/api/bookings/route.ts"
click node_contacts "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/contacts/page.tsx"
click node_gallery_page "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/gallery/page.tsx"
click node_attractions_page "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/nearby-attractions/page.tsx"
click node_blogs_page "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/blogs/page.tsx"
click node_page_shell "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/PageShell.tsx"
click node_explore_data "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/explore.ts"
click node_site_data "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/site.ts"
click node_scroll_engine "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/scroll.ts"
click node_motion "https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/MotionProvider.tsx"

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_hero,node_approach,node_rooms,node_pullback,node_forest,node_dining,node_stay,node_scroll_engine,node_motion toneBlue
class node_gallery_page,node_attractions_page,node_blogs_page,node_page_shell toneAmber
class node_booking,node_booking_api,node_enquiry_store,node_whatsapp,node_contacts toneMint
class node_explore_data,node_site_data toneRose
class node_guest,node_external_site toneIndigo
```

## Components

### Stay experience

- [Immersive home](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/page.tsx): `app/app/page.tsx`
- [Arrival scene](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Hero.tsx): `app/components/Hero.tsx`
- [House approach](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Approach.tsx): `app/components/Approach.tsx`
- [Room journey](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/RoomJourney.tsx): `app/components/RoomJourney.tsx`
- [Estate pullback](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Pullback.tsx): `app/components/Pullback.tsx`
- [Forest experiences](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Forest.tsx): `app/components/Forest.tsx`
- [Meals and tariff](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Table.tsx): `app/components/Table.tsx`
- [Stay details](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Stay.tsx): `app/components/Stay.tsx`
- [Scroll progress](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/scroll.ts): `app/lib/scroll.ts`
- [Motion provider](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/MotionProvider.tsx): `app/components/MotionProvider.tsx`

### Explore information

- [Photo gallery](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/gallery/page.tsx): `app/app/gallery/page.tsx`
- [Nearby attractions](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/nearby-attractions/page.tsx): `app/app/nearby-attractions/page.tsx`
- [Field journal](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/blogs/page.tsx): `app/app/blogs/page.tsx`
- [Page shell](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/PageShell.tsx): `app/components/PageShell.tsx`

### Stay enquiries

- [Booking form](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/components/Booking.tsx): `app/components/Booking.tsx`
- [Enquiry endpoint](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/api/bookings/route.ts): `app/app/api/bookings/route.ts`
- **Enquiry records**
- **WhatsApp fallback**
- [Contact details](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/app/contacts/page.tsx): `app/app/contacts/page.tsx`

### Property content

- [Explore content](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/explore.ts): `app/lib/explore.ts`
- [Property and rates](https://github.com/aiclubvsa/greenstay-immersive-site/blob/main/app/lib/site.ts): `app/lib/site.ts`

### Other components

- **Prospective guest**
- **Published photo source**

## Connections

- Prospective guest → Immersive home: views
- Immersive home → Arrival scene: renders
- Immersive home → House approach: renders
- Immersive home → Room journey: renders
- Immersive home → Estate pullback: renders
- Immersive home → Forest experiences: renders
- Immersive home → Meals and tariff: renders
- Immersive home → Stay details: renders
- Immersive home → Booking form: renders
- Scroll progress → Arrival scene: updates progress
- Scroll progress → House approach: updates progress
- Scroll progress → Room journey: updates progress
- Scroll progress → Estate pullback: updates progress
- Scroll progress → Forest experiences: updates progress
- Room journey → Property and rates: reads rooms
- Forest experiences → Property and rates: reads activities
- Meals and tariff → Property and rates: reads inclusions
- Stay details → Property and rates: reads property
- Booking form → Property and rates: reads rates and rooms
- Booking form → Enquiry endpoint: posts enquiry
- Booking form → WhatsApp fallback: offers fallback
- Enquiry endpoint → Property and rates: checks rooms
- Enquiry endpoint → Enquiry records: appends enquiry
- Prospective guest → Photo gallery: opens
- Prospective guest → Nearby attractions: opens
- Prospective guest → Field journal: opens
- Prospective guest → Contact details: opens
- Contact details → Page shell: uses
- Photo gallery → Page shell: uses
- Nearby attractions → Page shell: uses
- Field journal → Page shell: uses
- Photo gallery → Explore content: reads gallery
- Nearby attractions → Explore content: reads attractions
- Field journal → Explore content: reads posts
- Contact details → Booking form: renders form
- Explore content → Published photo source: references photos
- Motion provider → Immersive home: provides motion context