# lianbeast/hamna-henna-site architecture

> Architecture diagram of the GitHub repository lianbeast/hamna-henna-site, 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/lianbeast/hamna-henna-site
- Repository: https://github.com/lianbeast/hamna-henna-site

## Overview

This is an Astro portfolio and booking site for a henna artist, with a separate Supabase-backed admin area. The visitor journey is to explore the portfolio and service information, then submit a booking inquiry; administrators sign in to review inquiries and edit business settings. The README documents 3D visuals, scroll animation, theme controls, and tanpura audio, but their implementations and page assembly were not sampled. The inquiry function shown validates and logs submissions; it does not show persistence.

Main entry points: [`site/src/components/themeStore.ts`](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/themeStore.ts) (Theme state), [`site/src/lib/supabase.ts`](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/lib/supabase.ts) (Supabase client), [`site/src/components/BookingInquiry.tsx`](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/BookingInquiry.tsx) (Inquiry form), [`site/src/pages/admin/login.tsx`](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/admin/login.tsx) (Admin login)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public portfolio"]
  node_home["Portfolio page<br/>[index.astro]"]
  node_about["Artist story<br/>[About.astro]"]
  node_services["Services<br/>[Services.astro]"]
  node_pricing["Pricing<br/>[Pricing.astro]"]
  node_portfolio["Work gallery<br/>[Portfolio.astro]"]
  node_portfolio_data["Portfolio content<br/>[portfolio.json]"]
  node_process["Process<br/>[Process.astro]"]
  node_testimonials["Testimonials<br/>[Testimonials.astro]"]
  node_testimonial_data["Testimonial content<br/>[testimonials.json]"]
  node_faq["FAQ accordion<br/>[FAQAccordion.tsx]"]
  node_faq_data["FAQ content<br/>[faq.json]"]
end

subgraph group_interaction["Interactive experience"]
  node_scene["3D henna scene"]
  node_toolbar["Floating toolbar"]
  node_theme_toggle["Theme toggle<br/>[ThemeToggle.tsx]"]
  node_theme_store["Theme state<br/>[themeStore.ts]"]
  node_scroll_state["Scroll state<br/>[scrollStore.ts]"]
  node_audio["Tanpura audio"]
end

subgraph group_booking["Booking workflow"]
  node_booking_form["Inquiry form<br/>[BookingInquiry.tsx]"]
  node_inquiry_handler["Inquiry endpoint<br/>[inquiries.ts]"]
end

subgraph group_admin["Admin management"]
  node_login["Admin login<br/>[login.tsx]"]
  node_dashboard["Admin dashboard<br/>[dashboard.tsx]"]
  node_supabase_client["Supabase client<br/>[supabase.ts]"]
end

node_visitor(("Visitor"))
node_customer(("Booking customer"))
node_admin_user(("Administrator"))
node_supabase[("Supabase service")]

node_visitor -->|"visits"| node_home
node_portfolio -->|"reads"| node_portfolio_data
node_testimonials -->|"reads"| node_testimonial_data
node_faq -->|"receives items"| node_faq_data
node_toolbar -->|"toggles theme"| node_theme_store
node_theme_toggle -->|"subscribes"| node_theme_store
node_theme_store -.->|"notifies theme"| node_scene
node_customer -->|"submits details"| node_booking_form
node_booking_form -->|"POSTs inquiry"| node_inquiry_handler
node_admin_user -->|"signs in"| node_login
node_login -->|"authenticates"| node_supabase_client
node_dashboard -->|"reads and updates"| node_supabase_client
node_supabase_client -->|"queries"| node_supabase

click node_home "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/index.astro"
click node_about "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/About.astro"
click node_services "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Services.astro"
click node_pricing "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Pricing.astro"
click node_portfolio "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Portfolio.astro"
click node_portfolio_data "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/data/portfolio.json"
click node_process "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Process.astro"
click node_testimonials "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Testimonials.astro"
click node_testimonial_data "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/data/testimonials.json"
click node_faq "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/FAQAccordion.tsx"
click node_faq_data "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/data/faq.json"
click node_scene "https://github.com/lianbeast/hamna-henna-site/tree/main/site/src/components"
click node_toolbar "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/FloatingToolbar.tsx"
click node_theme_toggle "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/ThemeToggle.tsx"
click node_theme_store "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/themeStore.ts"
click node_scroll_state "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/scrollStore.ts"
click node_audio "https://github.com/lianbeast/hamna-henna-site/tree/main/site/src/components"
click node_booking_form "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/BookingInquiry.tsx"
click node_inquiry_handler "https://github.com/lianbeast/hamna-henna-site/blob/main/site/netlify/functions/inquiries.ts"
click node_login "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/admin/login.tsx"
click node_dashboard "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/admin/dashboard.tsx"
click node_supabase_client "https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/lib/supabase.ts"

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_services,node_pricing,node_portfolio,node_portfolio_data,node_process,node_testimonials,node_testimonial_data,node_faq,node_faq_data toneBlue
class node_scene,node_toolbar,node_theme_toggle,node_theme_store,node_scroll_state,node_audio,node_supabase toneAmber
class node_booking_form,node_inquiry_handler toneMint
class node_login,node_dashboard,node_supabase_client toneRose
class node_visitor,node_customer,node_admin_user toneIndigo
```

## Components

### Public portfolio

- [Portfolio page](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/index.astro): `site/src/pages/index.astro`
- [Artist story](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/About.astro): `site/src/components/About.astro`
- [Services](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Services.astro): `site/src/components/Services.astro`
- [Pricing](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Pricing.astro): `site/src/components/Pricing.astro`
- [Work gallery](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Portfolio.astro): `site/src/components/Portfolio.astro`
- [Portfolio content](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/data/portfolio.json): `site/src/data/portfolio.json`
- [Process](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Process.astro): `site/src/components/Process.astro`
- [Testimonials](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/Testimonials.astro): `site/src/components/Testimonials.astro`
- [Testimonial content](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/data/testimonials.json): `site/src/data/testimonials.json`
- [FAQ accordion](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/FAQAccordion.tsx): `site/src/components/FAQAccordion.tsx`
- [FAQ content](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/data/faq.json): `site/src/data/faq.json`

### Interactive experience

- [3D henna scene](https://github.com/lianbeast/hamna-henna-site/tree/main/site/src/components): `site/src/components`
- [Floating toolbar](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/FloatingToolbar.tsx): `site/src/components/FloatingToolbar.tsx`
- [Theme toggle](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/ThemeToggle.tsx): `site/src/components/ThemeToggle.tsx`
- [Theme state](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/themeStore.ts): `site/src/components/themeStore.ts`
- [Scroll state](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/scrollStore.ts): `site/src/components/scrollStore.ts`
- [Tanpura audio](https://github.com/lianbeast/hamna-henna-site/tree/main/site/src/components): `site/src/components`

### Booking workflow

- [Inquiry form](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/components/BookingInquiry.tsx): `site/src/components/BookingInquiry.tsx`
- [Inquiry endpoint](https://github.com/lianbeast/hamna-henna-site/blob/main/site/netlify/functions/inquiries.ts): `site/netlify/functions/inquiries.ts`

### Admin management

- [Admin login](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/admin/login.tsx): `site/src/pages/admin/login.tsx`
- [Admin dashboard](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/pages/admin/dashboard.tsx): `site/src/pages/admin/dashboard.tsx`
- [Supabase client](https://github.com/lianbeast/hamna-henna-site/blob/main/site/src/lib/supabase.ts): `site/src/lib/supabase.ts`

### Other components

- **Visitor**
- **Booking customer**
- **Administrator**
- **Supabase service**

## Connections

- Visitor → Portfolio page: visits
- Work gallery → Portfolio content: reads
- Testimonials → Testimonial content: reads
- FAQ accordion → FAQ content: receives items
- Floating toolbar → Theme state: toggles theme
- Theme toggle → Theme state: subscribes
- Theme state → 3D henna scene: notifies theme
- Booking customer → Inquiry form: submits details
- Inquiry form → Inquiry endpoint: POSTs inquiry
- Administrator → Admin login: signs in
- Admin login → Supabase client: authenticates
- Admin dashboard → Supabase client: reads and updates
- Supabase client → Supabase service: queries