# kushi8811/il-vespro architecture

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

- Interactive diagram: https://gitdiagram.com/kushi8811/il-vespro
- Repository: https://github.com/kushi8811/il-vespro

## Overview

Il Vespro is a restaurant website: visitors explore the restaurant, cuisine, menu and gallery, then can submit a table booking. The booking page writes to Supabase and then calls the booking API, which sends owner and customer emails. Other routes and shared layout provide the restaurant’s informational and contact experience. The booking flow and several page implementations were sampled; other listed routes are represented at their exact route paths, with no unsampled interactions inferred.

Main entry points: [`app/page.js`](https://github.com/kushi8811/il-vespro/blob/master/app/page.js) (Home experience), [`app/layout.js`](https://github.com/kushi8811/il-vespro/blob/master/app/layout.js) (Site layout), [`app/booking/page.js`](https://github.com/kushi8811/il-vespro/blob/master/app/booking/page.js) (Booking form), [`app/about/page.js`](https://github.com/kushi8811/il-vespro/blob/master/app/about/page.js) (Story and location)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Restaurant website"]
  node_home["Home experience<br/>[page.js]"]
  node_about["Story and location<br/>[page.js]"]
  node_menu["Menu<br/>[page.js]"]
  node_gallery["Gallery<br/>[page.js]"]
  node_home_sections["Home sections"]
  node_hero["Hero<br/>[Hero.js]"]
  node_slider["Image slider<br/>[Slider.js]"]
  node_contact_card["Contact form<br/>[ContactCard.js]"]
  node_video["Gallery video<br/>[Video.js]"]
  node_maps["Google Maps"]
end

subgraph group_booking["Reservations"]
  node_booking_page["Booking form<br/>[page.js]"]
  node_booking_api["Booking email handler<br/>[route.js]"]
  node_supabase[("Supabase bookings")]
  node_gmail["Gmail SMTP"]
end

subgraph group_shared["Shared experience"]
  node_layout["Site layout<br/>[layout.js]"]
  node_header["Header navigation<br/>[Header.js]"]
  node_footer["Footer and contact<br/>[Footer.js]"]
  node_cookie["Cookie banner<br/>[CookieBanner.js]"]
  node_event["Event popup<br/>[PopEvent.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_home
node_visitor -->|"visits"| node_about
node_visitor -->|"visits"| node_menu
node_visitor -->|"visits"| node_gallery
node_visitor -->|"submits booking"| node_booking_page
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_footer
node_layout -->|"renders"| node_cookie
node_layout -->|"renders"| node_event
node_layout -->|"renders children"| node_home
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_home_sections
node_home -->|"renders"| node_slider
node_home -->|"renders"| node_contact_card
node_booking_page -->|"inserts booking"| node_supabase
node_booking_page -->|"POST booking"| node_booking_api
node_booking_api -->|"sends emails"| node_gmail
node_gallery -->|"renders"| node_video
node_about -->|"embeds map"| node_maps

click node_home "https://github.com/kushi8811/il-vespro/blob/master/app/page.js"
click node_about "https://github.com/kushi8811/il-vespro/blob/master/app/about/page.js"
click node_menu "https://github.com/kushi8811/il-vespro/blob/master/app/menu/page.js"
click node_gallery "https://github.com/kushi8811/il-vespro/blob/master/app/gallery/page.js"
click node_booking_page "https://github.com/kushi8811/il-vespro/blob/master/app/booking/page.js"
click node_booking_api "https://github.com/kushi8811/il-vespro/blob/master/app/api/bookings/route.js"
click node_layout "https://github.com/kushi8811/il-vespro/blob/master/app/layout.js"
click node_header "https://github.com/kushi8811/il-vespro/blob/master/app/_components/Header.js"
click node_footer "https://github.com/kushi8811/il-vespro/blob/master/app/_components/Footer.js"
click node_cookie "https://github.com/kushi8811/il-vespro/blob/master/app/_components/CookieBanner.js"
click node_event "https://github.com/kushi8811/il-vespro/blob/master/app/_components/PopEvent.js"
click node_home_sections "https://github.com/kushi8811/il-vespro/blob/master/app/_components/EssenceOfIlVespro.js"
click node_hero "https://github.com/kushi8811/il-vespro/blob/master/app/_components/Hero.js"
click node_slider "https://github.com/kushi8811/il-vespro/blob/master/app/_components/Slider.js"
click node_contact_card "https://github.com/kushi8811/il-vespro/blob/master/app/_components/ContactCard.js"
click node_video "https://github.com/kushi8811/il-vespro/blob/master/app/_components/Video.js"

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_about,node_menu,node_gallery,node_home_sections,node_hero,node_slider,node_contact_card,node_video,node_maps toneBlue
class node_booking_page,node_booking_api,node_supabase,node_gmail toneAmber
class node_layout,node_header,node_footer,node_cookie,node_event toneMint
class node_visitor toneIndigo
```

## Components

### Restaurant website

- [Home experience](https://github.com/kushi8811/il-vespro/blob/master/app/page.js): `app/page.js`
- [Story and location](https://github.com/kushi8811/il-vespro/blob/master/app/about/page.js): `app/about/page.js`
- [Menu](https://github.com/kushi8811/il-vespro/blob/master/app/menu/page.js): `app/menu/page.js`
- [Gallery](https://github.com/kushi8811/il-vespro/blob/master/app/gallery/page.js): `app/gallery/page.js`
- [Home sections](https://github.com/kushi8811/il-vespro/blob/master/app/_components/EssenceOfIlVespro.js): `app/_components/EssenceOfIlVespro.js`
- [Hero](https://github.com/kushi8811/il-vespro/blob/master/app/_components/Hero.js): `app/_components/Hero.js`
- [Image slider](https://github.com/kushi8811/il-vespro/blob/master/app/_components/Slider.js): `app/_components/Slider.js`
- [Contact form](https://github.com/kushi8811/il-vespro/blob/master/app/_components/ContactCard.js): `app/_components/ContactCard.js`
- [Gallery video](https://github.com/kushi8811/il-vespro/blob/master/app/_components/Video.js): `app/_components/Video.js`
- **Google Maps**

### Reservations

- [Booking form](https://github.com/kushi8811/il-vespro/blob/master/app/booking/page.js): `app/booking/page.js`
- [Booking email handler](https://github.com/kushi8811/il-vespro/blob/master/app/api/bookings/route.js): `app/api/bookings/route.js`
- **Supabase bookings**
- **Gmail SMTP**

### Shared experience

- [Site layout](https://github.com/kushi8811/il-vespro/blob/master/app/layout.js): `app/layout.js`
- [Header navigation](https://github.com/kushi8811/il-vespro/blob/master/app/_components/Header.js): `app/_components/Header.js`
- [Footer and contact](https://github.com/kushi8811/il-vespro/blob/master/app/_components/Footer.js): `app/_components/Footer.js`
- [Cookie banner](https://github.com/kushi8811/il-vespro/blob/master/app/_components/CookieBanner.js): `app/_components/CookieBanner.js`
- [Event popup](https://github.com/kushi8811/il-vespro/blob/master/app/_components/PopEvent.js): `app/_components/PopEvent.js`

### Other components

- **Visitor**

## Connections

- Visitor → Home experience: visits
- Visitor → Story and location: visits
- Visitor → Menu: visits
- Visitor → Gallery: visits
- Visitor → Booking form: submits booking
- Site layout → Header navigation: renders
- Site layout → Footer and contact: renders
- Site layout → Cookie banner: renders
- Site layout → Event popup: renders
- Site layout → Home experience: renders children
- Home experience → Hero: renders
- Home experience → Home sections: renders
- Home experience → Image slider: renders
- Home experience → Contact form: renders
- Booking form → Supabase bookings: inserts booking
- Booking form → Booking email handler: POST booking
- Booking email handler → Gmail SMTP: sends emails
- Gallery → Gallery video: renders
- Story and location → Google Maps: embeds map