# gurusaivs18/tg-1 architecture

> Architecture diagram of the GitHub repository gurusaivs18/tg-1, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gurusaivs18/tg-1
- Repository: https://github.com/gurusaivs18/tg-1

## Overview

#### Purpose and Runtime
This is a static marketing/presence site built with React and Vite. It presents company information, brands, categories, events, contact details, and UAE presence/network content. The client is a browser-rendered SPA; no backend, API layer, database, or authentication service is represented in the repository.

Key runtime/build entry points:
- `index.html`
- `src/main.jsx`
- `src/App.jsx`
- `vite.config.js`

#### Application Bootstrap and Shell
`src/main.jsx` mounts the React application into the Vite HTML host. `src/App.jsx` is the top-level composition boundary, expected to select/render page content and shared site framing.

Shared navigation and site-wide closing content are separated from page bodies:
- `src/App.jsx`
- `src/components/Navbar.jsx`
- `src/components/Footer.jsx`

Styling is imported or composed through global/application styles:
- `src/index.css`
- `src/App.css`
- `src/css/global.css`

#### Page-Level Content Model
The site is organized as discrete React page components rather than a server-side content system. Primary content domains are represented directly in `src/pages`, with UI sections rendered from components and local assets.

Main page boundaries:
- `src/pages/About.jsx`
- `src/pages/Brands.jsx`
- `src/pages/Categories.jsx`
- `src/pages/Contact.jsx`
- `src/pages/Events.jsx`
- `src/pages/OurPressence.jsx`

The home page is implemented as a reusable component rather than under `pages`:
- `src/components/Home.jsx`

#### Shared Presentation Components
Reusable visual modules provide consistent page composition and specialized interactive/display regions:
- `src/components/PageHero.jsx`
- `src/components/Loader.jsx`
- `src/components/UAENetworkMap.jsx`

`PageHero` likely standardizes hero/banner treatment across informational pages; `UAENetworkMap` encapsulates the UAE-presence visualization rather than embedding it in the page directly. `Loader` is a UI-state boundary for delayed loading or startup transitions.

Corresponding styles are isolated by feature:
- `src/css/PageHero.css`
- `src/css/Loader.css`
- `src/css/Ourpressence.css`

#### Brand Data and Asset Boundary
Brand-oriented content is partly data-driven through a local JavaScript dataset:
- `src/Data/brands.js`
- `src/pages/Brands.jsx`

Images are bundled as source assets, keeping the site self-contained and avoiding a remote CMS or image service:
- `src/assets/brand images`
- `src/assets/Brand-image-banners`
- `src/assets/brandsPageLogos`
- `src/assets/pages_hero`

Partner logos are grouped by business channel, supporting categorized presentation:
- `src/assets/partners-logo/Ecommerce`
- `src/assets/partners-logo/Hypermarkets`
- `src/assets/partners-logo/Operator`
- `src/assets/partners-logo/Travel`

#### Styling Architecture
CSS is organized primarily by page or component, with separate feature styles rather than CSS-in-JS or a design-system package. Major page-specific style boundaries include:
- `src/css/Home.css`
- `src/css/Brands.css`
- `src/css/About.css`
- `src/css/Events.css`
- `src/css/Pages.css`
- `src/css/Navbar.css`

The control flow is therefore: Vite serves `index.html`, React mounts through `src/main.jsx`, `App` assembles shared navigation/footer plus selected page content, and pages consume local data/components/assets.

#### Deployment and Auxiliary Scripts
Vite provides local development, HMR, and production bundling. Deployment configuration is present for Vercel:
- `vercel.json`
- `package.json`

Repository-level Node scripts also indicate offline asset processing and load testing, but they are outside the browser application’s primary runtime:
- `convert-images.js`
- `loadtest.js`

Main entry points: [`src/App.jsx`](https://github.com/gurusaivs18/tg-1/blob/main/src/App.jsx) (Application shell), [`src/assets/brand images`](https://github.com/gurusaivs18/tg-1/tree/main/src/assets/brand%20images) (Bundled media), [`src/pages/Brands.jsx`](https://github.com/gurusaivs18/tg-1/blob/main/src/pages/Brands.jsx) (Brands page), [`index.html`](https://github.com/gurusaivs18/tg-1/blob/main/index.html) (Vite HTML host)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Runtime"]
  node_html["Vite HTML host<br/>HTML entry<br/>[index.html]"]
  node_main["React bootstrap<br/>React entry<br/>[main.jsx]"]
  node_app["Application shell<br/>React composition<br/>[App.jsx]"]
end

subgraph group_pages["Page Content"]
  node_home["Home<br/>page component<br/>[Home.jsx]"]
  node_info_pages["Company pages<br/>page components"]
  node_brands["Brands page<br/>page component<br/>[Brands.jsx]"]
  node_presence["UAE presence page<br/>page component<br/>[OurPressence.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_navbar["Navigation<br/>shared component<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>shared component<br/>[Footer.jsx]"]
  node_hero["Page hero<br/>shared component<br/>[PageHero.jsx]"]
  node_network_map["UAE network map<br/>visualization component<br/>[UAENetworkMap.jsx]"]
  node_styles["Feature CSS<br/>global and feature styles<br/>[global.css]"]
end

subgraph group_content["Local Content &amp; Assets"]
  node_brand_data["Brand dataset<br/>local JS data<br/>[brands.js]"]
  node_assets["Bundled media<br/>source assets"]
end

subgraph group_delivery["Build &amp; Deployment"]
  node_vite{{"Vite build<br/>dev server and bundler<br/>[vite.config.js]"}}
  node_vercel["Vercel deployment<br/>deployment config<br/>[vercel.json]"]
  node_scripts["Offline scripts<br/>Node scripts<br/>[convert-images.js]"]
end

node_vite -->|"serves"| node_html
node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"selects"| node_home
node_app -->|"selects"| node_info_pages
node_app -->|"selects"| node_brands
node_app -->|"selects"| node_presence
node_info_pages -->|"uses"| node_hero
node_presence -->|"uses"| node_network_map
node_brands -->|"reads"| node_brand_data
node_brands -->|"renders"| node_assets
node_home -->|"renders"| node_assets
node_info_pages -->|"renders"| node_assets
node_app -->|"composes"| node_styles
node_vercel -.->|"deploys build"| node_vite
node_scripts -.->|"processes"| node_assets

click node_html "https://github.com/gurusaivs18/tg-1/blob/main/index.html"
click node_main "https://github.com/gurusaivs18/tg-1/blob/main/src/main.jsx"
click node_app "https://github.com/gurusaivs18/tg-1/blob/main/src/App.jsx"
click node_navbar "https://github.com/gurusaivs18/tg-1/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/gurusaivs18/tg-1/blob/main/src/components/Footer.jsx"
click node_home "https://github.com/gurusaivs18/tg-1/blob/main/src/components/Home.jsx"
click node_brands "https://github.com/gurusaivs18/tg-1/blob/main/src/pages/Brands.jsx"
click node_presence "https://github.com/gurusaivs18/tg-1/blob/main/src/pages/OurPressence.jsx"
click node_hero "https://github.com/gurusaivs18/tg-1/blob/main/src/components/PageHero.jsx"
click node_network_map "https://github.com/gurusaivs18/tg-1/blob/main/src/components/UAENetworkMap.jsx"
click node_brand_data "https://github.com/gurusaivs18/tg-1/blob/main/src/Data/brands.js"
click node_assets "https://github.com/gurusaivs18/tg-1/tree/main/src/assets/brand%20images"
click node_styles "https://github.com/gurusaivs18/tg-1/blob/main/src/css/global.css"
click node_vite "https://github.com/gurusaivs18/tg-1/blob/main/vite.config.js"
click node_vercel "https://github.com/gurusaivs18/tg-1/blob/main/vercel.json"
click node_scripts "https://github.com/gurusaivs18/tg-1/blob/main/convert-images.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_html,node_main,node_app toneBlue
class node_home,node_info_pages,node_brands,node_presence toneAmber
class node_navbar,node_footer,node_hero,node_network_map,node_styles toneMint
class node_brand_data,node_assets toneRose
class node_vite,node_vercel,node_scripts toneIndigo
```

## Components

### Browser Runtime

- [Vite HTML host](https://github.com/gurusaivs18/tg-1/blob/main/index.html): HTML entry · `index.html`
- [React bootstrap](https://github.com/gurusaivs18/tg-1/blob/main/src/main.jsx): React entry · Mounts the SPA into the HTML host. · `src/main.jsx`
- [Application shell](https://github.com/gurusaivs18/tg-1/blob/main/src/App.jsx): React composition · Selects page content and assembles shared framing. · `src/App.jsx`

### Page Content

- [Home](https://github.com/gurusaivs18/tg-1/blob/main/src/components/Home.jsx): page component · `src/components/Home.jsx`
- **Company pages**: page components · About, categories, contact, and events page boundaries.
- [Brands page](https://github.com/gurusaivs18/tg-1/blob/main/src/pages/Brands.jsx): page component · `src/pages/Brands.jsx`
- [UAE presence page](https://github.com/gurusaivs18/tg-1/blob/main/src/pages/OurPressence.jsx): page component · `src/pages/OurPressence.jsx`

### Shared UI

- [Navigation](https://github.com/gurusaivs18/tg-1/blob/main/src/components/Navbar.jsx): shared component · `src/components/Navbar.jsx`
- [Footer](https://github.com/gurusaivs18/tg-1/blob/main/src/components/Footer.jsx): shared component · `src/components/Footer.jsx`
- [Page hero](https://github.com/gurusaivs18/tg-1/blob/main/src/components/PageHero.jsx): shared component · Standardized informational-page banner. · `src/components/PageHero.jsx`
- [UAE network map](https://github.com/gurusaivs18/tg-1/blob/main/src/components/UAENetworkMap.jsx): visualization component · `src/components/UAENetworkMap.jsx`
- [Feature CSS](https://github.com/gurusaivs18/tg-1/blob/main/src/css/global.css): global and feature styles · Application, page, and component CSS. · `src/css/global.css`

### Local Content & Assets

- [Brand dataset](https://github.com/gurusaivs18/tg-1/blob/main/src/Data/brands.js): local JS data · `src/Data/brands.js`
- [Bundled media](https://github.com/gurusaivs18/tg-1/tree/main/src/assets/brand%20images): source assets · Brand, partner, logo, and page-hero images are local. · `src/assets/brand images`

### Build & Deployment

- [Vite build](https://github.com/gurusaivs18/tg-1/blob/main/vite.config.js): dev server and bundler · Provides development, HMR, and production builds. · `vite.config.js`
- [Vercel deployment](https://github.com/gurusaivs18/tg-1/blob/main/vercel.json): deployment config · `vercel.json`
- [Offline scripts](https://github.com/gurusaivs18/tg-1/blob/main/convert-images.js): Node scripts · Image conversion and load testing are outside browser runtime. · `convert-images.js`

## Connections

- Vite build → Vite HTML host: serves
- Vite HTML host → React bootstrap: loads
- React bootstrap → Application shell: mounts
- Application shell → Navigation: renders
- Application shell → Footer: renders
- Application shell → Home: selects
- Application shell → Company pages: selects
- Application shell → Brands page: selects
- Application shell → UAE presence page: selects
- Company pages → Page hero: uses
- UAE presence page → UAE network map: uses
- Brands page → Brand dataset: reads
- Brands page → Bundled media: renders
- Home → Bundled media: renders
- Company pages → Bundled media: renders
- Application shell → Feature CSS: composes
- Vercel deployment → Vite build: deploys build
- Offline scripts → Bundled media: processes