gurusaivs18/tg-1

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