# agronbajrami/bbafacilityservices architecture
> Architecture diagram of the GitHub repository agronbajrami/bbafacilityservices, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/agronbajrami/bbafacilityservices
- Repository: https://github.com/agronbajrami/bbafacilityservices
## Overview
BBA Facility Services is a React marketing website for Swiss property and facility services. Visitors view the company’s service offerings and benefits, learn about the business, and can fill out a quote-request form; submission currently shows a confirmation and clears the form rather than sending data to a backend. The app mounts a single page of sections, with navigation and calls to action scrolling between them. The component wiring and form behavior are shown in excerpts; other documented capabilities are represented where their implementation details were not sampled.
Main entry points: [`src/App.js`](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/App.js) (Page composition), [`src/components/Header.js`](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Header.js) (Header navigation), [`src/components/Footer.js`](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Footer.js) (Footer links), [`src/components/Hero.js`](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Hero.js) (Hero section)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_shell["Site shell"]
node_entry["React entry
[index.js]"]
node_app["Page composition
[App.js]"]
node_header["Header navigation
[Header.js]"]
node_logo["BBA logo
[Logo.js]"]
node_footer["Footer links
[Footer.js]"]
end
subgraph group_content["Business content"]
node_hero["Hero section
[Hero.js]"]
node_services["Service offerings
[Services.js]"]
node_benefits["Customer benefits
[Benefits.js]"]
node_about["Company profile
[About.js]"]
end
subgraph group_inquiry["Contact inquiry"]
node_contact["Quote request
[Contact.js]"]
end
node_visitor(("Visitor"))
node_browser(("Browser dialog"))
node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_services
node_app -->|"renders"| node_benefits
node_app -->|"renders"| node_about
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_header -->|"renders"| node_logo
node_hero -->|"scrolls to"| node_contact
node_hero -->|"scrolls to"| node_services
node_header -->|"scrolls to"| node_contact
node_header -->|"scrolls to"| node_services
node_header -->|"scrolls to"| node_about
node_header -->|"scrolls to"| node_hero
node_footer -->|"scrolls to"| node_contact
node_footer -->|"scrolls to"| node_services
node_footer -->|"scrolls to"| node_about
node_footer -->|"scrolls to"| node_hero
node_contact -->|"shows confirmation"| node_browser
click node_entry "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/index.js"
click node_app "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/App.js"
click node_header "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Header.js"
click node_logo "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Logo.js"
click node_hero "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Hero.js"
click node_services "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Services.js"
click node_benefits "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Benefits.js"
click node_about "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/About.js"
click node_contact "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Contact.js"
click node_footer "https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Footer.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_entry,node_app,node_header,node_logo,node_footer,node_browser toneBlue
class node_hero,node_services,node_benefits,node_about toneAmber
class node_contact toneMint
class node_visitor toneIndigo
```
## Components
### Site shell
- [React entry](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/index.js): `src/index.js`
- [Page composition](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/App.js): `src/App.js`
- [Header navigation](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Header.js): `src/components/Header.js`
- [BBA logo](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Logo.js): `src/components/Logo.js`
- [Footer links](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Footer.js): `src/components/Footer.js`
### Business content
- [Hero section](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Hero.js): `src/components/Hero.js`
- [Service offerings](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Services.js): `src/components/Services.js`
- [Customer benefits](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Benefits.js): `src/components/Benefits.js`
- [Company profile](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/About.js): `src/components/About.js`
### Contact inquiry
- [Quote request](https://github.com/agronbajrami/bbafacilityservices/blob/main/src/components/Contact.js): `src/components/Contact.js`
### Other components
- **Visitor**
- **Browser dialog**
## Connections
- Visitor → React entry: opens site (evidence: `README.md`)
- React entry → Page composition: mounts (evidence: `src/index.js`)
- Page composition → Header navigation: renders (evidence: `src/App.js`)
- Page composition → Hero section: renders (evidence: `src/App.js`)
- Page composition → Service offerings: renders (evidence: `src/App.js`)
- Page composition → Customer benefits: renders (evidence: `src/App.js`)
- Page composition → Company profile: renders (evidence: `src/App.js`)
- Page composition → Quote request: renders (evidence: `src/App.js`)
- Page composition → Footer links: renders (evidence: `src/App.js`)
- Header navigation → BBA logo: renders (evidence: `src/components/Header.js`)
- Hero section → Quote request: scrolls to (evidence: `src/components/Hero.js`)
- Hero section → Service offerings: scrolls to (evidence: `src/components/Hero.js`)
- Header navigation → Quote request: scrolls to (evidence: `src/components/Header.js`)
- Header navigation → Service offerings: scrolls to (evidence: `src/components/Header.js`)
- Header navigation → Company profile: scrolls to (evidence: `src/components/Header.js`)
- Header navigation → Hero section: scrolls to (evidence: `src/components/Header.js`)
- Footer links → Quote request: scrolls to (evidence: `src/components/Footer.js`)
- Footer links → Service offerings: scrolls to (evidence: `src/components/Footer.js`)
- Footer links → Company profile: scrolls to (evidence: `src/components/Footer.js`)
- Footer links → Hero section: scrolls to (evidence: `src/components/Footer.js`)
- Quote request → Browser dialog: shows confirmation (evidence: `src/components/Contact.js`)