# hyangwoosh/gems-talent-webapp architecture

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

- Interactive diagram: https://gitdiagram.com/hyangwoosh/gems-talent-webapp
- Repository: https://github.com/hyangwoosh/gems-talent-webapp

## Overview

GEMS Talent is a static marketing site for a Singapore talent agency, with a Netlify-backed enquiry form. Visitors browse agency, roster, services and work pages; prospective clients submit an enquiry, which the function validates and sends to the team and enquirer via Resend. The README documents the shared content model and site capabilities; sampled source confirms the hero/sections read that data and the function invokes both email templates. Page-to-component wiring and some page-specific behavior were not sampled, so those links are omitted.

Main entry points: [`data.js`](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/data.js) (Shared site content), [`netlify/functions/enquiry.js`](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/netlify/functions/enquiry.js) (Enquiry handler), [`index.html`](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/index.html) (Homepage), [`artistes.html`](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/artistes.html) (Artiste roster)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Marketing site"]
  node_home["Homepage<br/>[index.html]"]
  node_roster["Artiste roster<br/>[artistes.html]"]
  node_clients["Client list<br/>[clients.html]"]
  node_work["Case studies<br/>[work.html]"]
  node_services["Services page<br/>[services.html]"]
  node_about["Agency profile<br/>[about.html]"]
  node_contact["Contact form<br/>[contact.html]"]
  node_ogtype["Type OG card<br/>[og-card.html]"]
  node_ogphoto["Photo OG card<br/>[og-card-photo.html]"]
end

subgraph group_presentation["Presentation"]
  node_content[("Shared site content<br/>[data.js]")]
  node_hero["Homepage hero<br/>[hero.jsx]"]
  node_sections["Page sections<br/>[sections.jsx]"]
  node_navigation["Site navigation<br/>[nav.jsx]"]
  node_pageheader["Inner page header<br/>[page-header.jsx]"]
  node_tweaks["Tweaks panel<br/>[tweaks-panel.jsx]"]
  node_styles["Site styling<br/>[styles.css]"]
end

subgraph group_enquiry["Enquiry handling"]
  node_endpoint["Enquiry handler<br/>[enquiry.js]"]
end

subgraph group_email["Email delivery"]
  node_teamtemplate["Team notification"]
  node_replytemplate["Auto reply<br/>[auto-reply.js]"]
end

node_visitor(("Site visitor"))
node_resend["Resend"]
node_enquirer(("Prospective client"))
node_team(("GEMS team"))

node_visitor -->|"browses"| node_home
node_visitor -->|"browses"| node_roster
node_visitor -->|"browses"| node_clients
node_visitor -->|"browses"| node_work
node_visitor -->|"browses"| node_services
node_visitor -->|"browses"| node_about
node_visitor -->|"opens"| node_contact
node_visitor -->|"views"| node_ogtype
node_visitor -->|"views"| node_ogphoto
node_home -->|"reads"| node_content
node_roster -->|"reads"| node_content
node_clients -->|"reads"| node_content
node_work -->|"reads"| node_content
node_services -->|"reads"| node_content
node_about -->|"reads"| node_content
node_hero -->|"reads"| node_content
node_sections -->|"reads"| node_content
node_contact -->|"submits"| node_endpoint
node_endpoint -->|"renders"| node_teamtemplate
node_endpoint -->|"renders"| node_replytemplate
node_endpoint -->|"sends email"| node_resend
node_resend -->|"delivers notice"| node_team
node_resend -->|"delivers reply"| node_enquirer

click node_home "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/index.html"
click node_roster "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/artistes.html"
click node_clients "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/clients.html"
click node_work "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/work.html"
click node_services "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/services.html"
click node_about "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/about.html"
click node_contact "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/contact.html"
click node_ogtype "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/og-card.html"
click node_ogphoto "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/og-card-photo.html"
click node_content "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/data.js"
click node_hero "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/hero.jsx"
click node_sections "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/sections.jsx"
click node_navigation "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/nav.jsx"
click node_pageheader "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/page-header.jsx"
click node_tweaks "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/tweaks-panel.jsx"
click node_styles "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/styles/styles.css"
click node_endpoint "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/netlify/functions/enquiry.js"
click node_teamtemplate "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/email-templates/team-notification.js"
click node_replytemplate "https://github.com/hyangwoosh/gems-talent-webapp/blob/main/email-templates/auto-reply.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_roster,node_clients,node_work,node_services,node_about,node_contact,node_ogtype,node_ogphoto,node_enquirer toneBlue
class node_content,node_hero,node_sections,node_navigation,node_pageheader,node_tweaks,node_styles toneAmber
class node_endpoint toneMint
class node_teamtemplate,node_replytemplate toneRose
class node_visitor,node_resend,node_team toneIndigo
```

## Components

### Marketing site

- [Homepage](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/index.html): `index.html`
- [Artiste roster](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/artistes.html): `artistes.html`
- [Client list](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/clients.html): `clients.html`
- [Case studies](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/work.html): `work.html`
- [Services page](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/services.html): `services.html`
- [Agency profile](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/about.html): `about.html`
- [Contact form](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/contact.html): `contact.html`
- [Type OG card](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/og-card.html): `og-card.html`
- [Photo OG card](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/og-card-photo.html): `og-card-photo.html`

### Presentation

- [Shared site content](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/data.js): `data.js`
- [Homepage hero](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/hero.jsx): `components/hero.jsx`
- [Page sections](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/sections.jsx): `components/sections.jsx`
- [Site navigation](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/nav.jsx): `components/nav.jsx`
- [Inner page header](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/page-header.jsx): `components/page-header.jsx`
- [Tweaks panel](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/components/tweaks-panel.jsx): `components/tweaks-panel.jsx`
- [Site styling](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/styles/styles.css): `styles/styles.css`

### Enquiry handling

- [Enquiry handler](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/netlify/functions/enquiry.js): `netlify/functions/enquiry.js`

### Email delivery

- [Team notification](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/email-templates/team-notification.js): `email-templates/team-notification.js`
- [Auto reply](https://github.com/hyangwoosh/gems-talent-webapp/blob/main/email-templates/auto-reply.js): `email-templates/auto-reply.js`

### Other components

- **Site visitor**
- **Resend**
- **Prospective client**
- **GEMS team**

## Connections

- Site visitor → Homepage: browses (evidence: `README.md`)
- Site visitor → Artiste roster: browses (evidence: `README.md`)
- Site visitor → Client list: browses (evidence: `README.md`)
- Site visitor → Case studies: browses (evidence: `README.md`)
- Site visitor → Services page: browses (evidence: `README.md`)
- Site visitor → Agency profile: browses (evidence: `README.md`)
- Site visitor → Contact form: opens (evidence: `README.md`)
- Site visitor → Type OG card: views (evidence: `README.md`)
- Site visitor → Photo OG card: views (evidence: `README.md`)
- Homepage → Shared site content: reads (evidence: `README.md`)
- Artiste roster → Shared site content: reads (evidence: `README.md`)
- Client list → Shared site content: reads (evidence: `README.md`)
- Case studies → Shared site content: reads (evidence: `README.md`)
- Services page → Shared site content: reads (evidence: `README.md`)
- Agency profile → Shared site content: reads (evidence: `README.md`)
- Homepage hero → Shared site content: reads (evidence: `components/hero.jsx`)
- Page sections → Shared site content: reads (evidence: `components/sections.jsx`)
- Contact form → Enquiry handler: submits (evidence: `README.md`)
- Enquiry handler → Team notification: renders (evidence: `netlify/functions/enquiry.js`)
- Enquiry handler → Auto reply: renders (evidence: `netlify/functions/enquiry.js`)
- Enquiry handler → Resend: sends email (evidence: `README.md`)
- Resend → GEMS team: delivers notice (evidence: `README.md`)
- Resend → Prospective client: delivers reply (evidence: `README.md`)