# divineninja/usld-tsx-template architecture

> Architecture diagram of the GitHub repository divineninja/usld-tsx-template, 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/divineninja/usld-tsx-template
- Repository: https://github.com/divineninja/usld-tsx-template

## Overview

AutoPro Services is a bilingual automotive-services website. Visitors browse the home page’s service offerings and project gallery, then can navigate to a quote-request form; the sampled code shows the form’s fields but does not establish where submissions go. The app also includes informational sections, contact details, and a not-found route. The graph reflects the visible route and component composition; unsampled component behavior and any quote-processing backend are not inferred.

Main entry points: [`src/pages/Index.tsx`](https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/Index.tsx) (Home page), [`src/App.tsx`](https://github.com/divineninja/usld-tsx-template/blob/main/src/App.tsx) (App and routes), [`src/components/Services.tsx`](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Services.tsx) (Service catalog), [`src/pages/Quote.tsx`](https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/Quote.tsx) (Quote page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App and routing"]
  node_entry["Browser entry<br/>[main.tsx]"]
  node_app["App and routes<br/>[App.tsx]"]
  node_home["Home page<br/>[Index.tsx]"]
  node_quote["Quote page<br/>[Quote.tsx]"]
  node_notfound["Not found<br/>[NotFound.tsx]"]
end

subgraph group_experience["Customer experience"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_hero["Service introduction<br/>[Hero.tsx]"]
  node_services["Service catalog<br/>[Services.tsx]"]
  node_gallery["Work gallery<br/>[Gallery.tsx]"]
  node_about["About section<br/>[About.tsx]"]
  node_footer["Contact footer<br/>[Footer.tsx]"]
end

subgraph group_state["Shared state"]
  node_language["Language context"]
end

subgraph group_presentation["UI building blocks"]
  node_ui["Shared UI controls"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes /"| node_home
node_app -->|"routes /quote"| node_quote
node_app -->|"routes unmatched"| node_notfound
node_app -->|"provides context"| node_language
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_services
node_home -->|"renders"| node_gallery
node_home -->|"renders"| node_about
node_home -->|"renders"| node_footer
node_services -->|"navigates to"| node_quote
node_services -->|"reads translations"| node_language
node_gallery -->|"reads translations"| node_language
node_quote -->|"reads translations"| node_language
node_services -->|"uses controls"| node_ui
node_quote -->|"uses controls"| node_ui

click node_entry "https://github.com/divineninja/usld-tsx-template/blob/main/src/main.tsx"
click node_app "https://github.com/divineninja/usld-tsx-template/blob/main/src/App.tsx"
click node_home "https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/Index.tsx"
click node_quote "https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/Quote.tsx"
click node_notfound "https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/NotFound.tsx"
click node_navigation "https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Navigation.tsx"
click node_hero "https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Hero.tsx"
click node_services "https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Services.tsx"
click node_gallery "https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Gallery.tsx"
click node_about "https://github.com/divineninja/usld-tsx-template/blob/main/src/components/About.tsx"
click node_footer "https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Footer.tsx"
click node_language "https://github.com/divineninja/usld-tsx-template/blob/main/src/contexts/LanguageContext.tsx"
click node_ui "https://github.com/divineninja/usld-tsx-template/tree/main/src/components/ui"

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_entry,node_app,node_home,node_quote,node_notfound toneBlue
class node_navigation,node_hero,node_services,node_gallery,node_about,node_footer toneAmber
class node_language toneMint
class node_ui toneRose
class node_visitor toneIndigo
```

## Components

### App and routing

- [Browser entry](https://github.com/divineninja/usld-tsx-template/blob/main/src/main.tsx): `src/main.tsx`
- [App and routes](https://github.com/divineninja/usld-tsx-template/blob/main/src/App.tsx): `src/App.tsx`
- [Home page](https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Quote page](https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/Quote.tsx): `src/pages/Quote.tsx`
- [Not found](https://github.com/divineninja/usld-tsx-template/blob/main/src/pages/NotFound.tsx): `src/pages/NotFound.tsx`

### Customer experience

- [Navigation](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Navigation.tsx): `src/components/Navigation.tsx`
- [Service introduction](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Service catalog](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Services.tsx): `src/components/Services.tsx`
- [Work gallery](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Gallery.tsx): `src/components/Gallery.tsx`
- [About section](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Contact footer](https://github.com/divineninja/usld-tsx-template/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Shared state

- [Language context](https://github.com/divineninja/usld-tsx-template/blob/main/src/contexts/LanguageContext.tsx): `src/contexts/LanguageContext.tsx`

### UI building blocks

- [Shared UI controls](https://github.com/divineninja/usld-tsx-template/tree/main/src/components/ui): `src/components/ui`

### Other components

- **Visitor**

## Connections

- Visitor → Browser entry: opens site
- Browser entry → App and routes: renders
- App and routes → Home page: routes /
- App and routes → Quote page: routes /quote
- App and routes → Not found: routes unmatched
- App and routes → Language context: provides context
- Home page → Navigation: renders
- Home page → Service introduction: renders
- Home page → Service catalog: renders
- Home page → Work gallery: renders
- Home page → About section: renders
- Home page → Contact footer: renders
- Service catalog → Quote page: navigates to
- Service catalog → Language context: reads translations
- Work gallery → Language context: reads translations
- Quote page → Language context: reads translations
- Service catalog → Shared UI controls: uses controls
- Quote page → Shared UI controls: uses controls