# aahilaariz073-rgb/scollo-painting-website architecture

> Architecture diagram of the GitHub repository aahilaariz073-rgb/scollo-painting-website, 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/aahilaariz073-rgb/scollo-painting-website
- Repository: https://github.com/aahilaariz073-rgb/scollo-painting-website

## Overview

Scollo Painting’s repository contains a public marketing website and a separate exported design-system handoff. The visitor workflow is discovering painting services or local coverage, then contacting the company or requesting a quote. The website also has about, FAQ, gallery, and blog content. The handoff includes reusable UI components and React website screens, but the README describes these as design prototypes rather than production code. Website page files are mostly unsampled, so their internal links and form behavior are not mapped as verified calls.

Main entry points: [`project/components/core`](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/project/components/core) (Core components), [`website/js/main.js`](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/js/main.js) (Site interactions), [`project/ui_kits/website`](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/project/ui_kits/website) (Website screens), [`project/_ds_bundle.js`](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/project/_ds_bundle.js) (Design-system bundle)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public website"]
  node_home["Homepage<br/>[index.html]"]
  node_sitejs["Site interactions<br/>[main.js]"]
  node_quote["Quote request<br/>[quote.html]"]
  node_contact["Contact page<br/>[contact.html]"]
end

subgraph group_content["Site content"]
  node_services["Service pages"]
  node_areas["Service areas"]
  node_blog["Blog articles"]
  node_othercontent["Company pages"]
end

subgraph group_handoff["Design handoff"]
  node_prototype["Website screens"]
end

subgraph group_ui["Reusable UI"]
  node_designbundle["Design-system bundle<br/>[_ds_bundle.js]"]
  node_corecomponents["Core components"]
  node_designstyles["Design tokens and styles<br/>[styles.css]"]
end

node_visitor(("Site visitor"))

node_visitor -.->|"opens"| node_home
node_visitor -.->|"requests quote"| node_quote
node_visitor -.->|"explores services"| node_services
node_visitor -.->|"checks coverage"| node_areas
node_visitor -.->|"reads articles"| node_blog
node_sitejs -.->|"enhances interactions"| node_home
node_sitejs -->|"handles sent state"| node_quote
node_prototype -->|"uses UI exports"| node_designbundle
node_prototype -->|"uses components"| node_corecomponents
node_designbundle -->|"bundles components"| node_corecomponents
node_corecomponents -.->|"uses tokens"| node_designstyles

click node_home "https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/index.html"
click node_sitejs "https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/js/main.js"
click node_quote "https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/quote.html"
click node_contact "https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/contact.html"
click node_services "https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website/services"
click node_areas "https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website/areas"
click node_blog "https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website/blog"
click node_othercontent "https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website"
click node_prototype "https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/project/ui_kits/website"
click node_designbundle "https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/project/_ds_bundle.js"
click node_corecomponents "https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/project/components/core"
click node_designstyles "https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/project/styles.css"

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_sitejs,node_quote,node_contact toneBlue
class node_services,node_areas,node_blog,node_othercontent toneAmber
class node_prototype toneMint
class node_designbundle,node_corecomponents,node_designstyles toneRose
class node_visitor toneIndigo
```

## Components

### Public website

- [Homepage](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/index.html): `website/index.html`
- [Site interactions](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/js/main.js): `website/js/main.js`
- [Quote request](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/quote.html): `website/quote.html`
- [Contact page](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/website/contact.html): `website/contact.html`

### Site content

- [Service pages](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website/services): `website/services`
- [Service areas](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website/areas): `website/areas`
- [Blog articles](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website/blog): `website/blog`
- [Company pages](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/website): `website`

### Design handoff

- [Website screens](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/project/ui_kits/website): `project/ui_kits/website`

### Reusable UI

- [Design-system bundle](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/project/_ds_bundle.js): `project/_ds_bundle.js`
- [Core components](https://github.com/aahilaariz073-rgb/scollo-painting-website/tree/main/project/components/core): `project/components/core`
- [Design tokens and styles](https://github.com/aahilaariz073-rgb/scollo-painting-website/blob/main/project/styles.css): `project/styles.css`

### Other components

- **Site visitor**

## Connections

- Site visitor → Homepage: opens
- Site visitor → Quote request: requests quote
- Site visitor → Service pages: explores services
- Site visitor → Service areas: checks coverage
- Site visitor → Blog articles: reads articles
- Site interactions → Homepage: enhances interactions
- Site interactions → Quote request: handles sent state (evidence: `website/js/main.js`)
- Website screens → Design-system bundle: uses UI exports (evidence: `project/ui_kits/website/home.jsx`)
- Website screens → Core components: uses components (evidence: `project/ui_kits/website/quote.jsx`)
- Design-system bundle → Core components: bundles components (evidence: `project/_ds_bundle.js`)
- Core components → Design tokens and styles: uses tokens