# mohanrajesh28/navisportagency architecture

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

- Interactive diagram: https://gitdiagram.com/mohanrajesh28/navisportagency
- Repository: https://github.com/mohanrajesh28/navisportagency

## Overview

Navisport is a public-facing maritime agency services website. Visitors enter through the React app, navigate its Home, Work, About, and Contact routes, and view agency information, service offerings, Gulf port coverage, or contact details. The Contact page presents a form, but the sampled handler only prevents submission; no backend or message-delivery flow is evidenced. Source excerpts are partial, so the graph limits links to visible composition and navigation.

Main entry points: [`src/App.tsx`](https://github.com/mohanrajesh28/navisportagency/blob/main/src/App.tsx) (App router), [`src/pages/Home.tsx`](https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Home.tsx) (Home page), [`src/components/ServicesList.tsx`](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/ServicesList.tsx) (Services list), [`src/main.tsx`](https://github.com/mohanrajesh28/navisportagency/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_mount["React entry<br/>[main.tsx]"]
  node_router["App router<br/>[App.tsx]"]
end

subgraph group_pages["Public pages"]
  node_home["Home page<br/>[Home.tsx]"]
  node_work["Work page<br/>[Work.tsx]"]
  node_aboutpage["About page<br/>[About.tsx]"]
  node_contact["Contact page<br/>[Contact.tsx]"]
end

subgraph group_content["Agency content"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_aboutsection["Agency overview<br/>[About.tsx]"]
  node_mission["Mission<br/>[Mission.tsx]"]
  node_services["Services list<br/>[ServicesList.tsx]"]
  node_hubs["Gulf port hubs<br/>[Hubs.tsx]"]
end

subgraph group_shell["Shared shell"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_smooth["Smooth scrolling<br/>[SmoothScroll.tsx]"]
  node_cta["Contact CTA<br/>[ContactCTA.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

node_visitor(("Visitor"))
node_imagehost(("Unsplash images"))

node_visitor -->|"opens site"| node_mount
node_mount -->|"renders"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_work
node_router -->|"routes to"| node_aboutpage
node_router -->|"routes to"| node_contact
node_router -->|"wraps content"| node_smooth
node_router -->|"renders"| node_navbar
node_router -->|"renders"| node_cta
node_router -->|"renders"| node_footer
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_aboutsection
node_home -->|"renders"| node_mission
node_home -->|"renders"| node_services
node_home -->|"renders"| node_hubs
node_aboutsection -->|"links to"| node_aboutpage
node_services -->|"links to"| node_work
node_hubs -.->|"loads images"| node_imagehost
node_services -.->|"loads images"| node_imagehost

click node_mount "https://github.com/mohanrajesh28/navisportagency/blob/main/src/main.tsx"
click node_router "https://github.com/mohanrajesh28/navisportagency/blob/main/src/App.tsx"
click node_home "https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Home.tsx"
click node_work "https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Work.tsx"
click node_aboutpage "https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/About.tsx"
click node_contact "https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Contact.tsx"
click node_hero "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Hero.tsx"
click node_aboutsection "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/About.tsx"
click node_mission "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Mission.tsx"
click node_services "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/ServicesList.tsx"
click node_hubs "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Hubs.tsx"
click node_navbar "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Navbar.tsx"
click node_smooth "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/SmoothScroll.tsx"
click node_cta "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/ContactCTA.tsx"
click node_footer "https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Footer.tsx"

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_mount,node_router toneBlue
class node_home,node_work,node_aboutpage,node_contact toneAmber
class node_hero,node_aboutsection,node_mission,node_services,node_hubs toneMint
class node_navbar,node_smooth,node_cta,node_footer toneRose
class node_visitor,node_imagehost toneIndigo
```

## Components

### App runtime

- [React entry](https://github.com/mohanrajesh28/navisportagency/blob/main/src/main.tsx): `src/main.tsx`
- [App router](https://github.com/mohanrajesh28/navisportagency/blob/main/src/App.tsx): `src/App.tsx`

### Public pages

- [Home page](https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Work page](https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Work.tsx): `src/pages/Work.tsx`
- [About page](https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/About.tsx): `src/pages/About.tsx`
- [Contact page](https://github.com/mohanrajesh28/navisportagency/blob/main/src/pages/Contact.tsx): `src/pages/Contact.tsx`

### Agency content

- [Hero](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Agency overview](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Mission](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Mission.tsx): `src/components/Mission.tsx`
- [Services list](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/ServicesList.tsx): `src/components/ServicesList.tsx`
- [Gulf port hubs](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Hubs.tsx): `src/components/Hubs.tsx`

### Shared shell

- [Navigation](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Smooth scrolling](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/SmoothScroll.tsx): `src/components/SmoothScroll.tsx`
- [Contact CTA](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/ContactCTA.tsx): `src/components/ContactCTA.tsx`
- [Footer](https://github.com/mohanrajesh28/navisportagency/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Other components

- **Visitor**
- **Unsplash images**

## Connections

- Visitor → React entry: opens site
- React entry → App router: renders
- App router → Home page: routes to
- App router → Work page: routes to
- App router → About page: routes to
- App router → Contact page: routes to
- App router → Smooth scrolling: wraps content
- App router → Navigation: renders
- App router → Contact CTA: renders
- App router → Footer: renders
- Home page → Hero: renders
- Home page → Agency overview: renders
- Home page → Mission: renders
- Home page → Services list: renders
- Home page → Gulf port hubs: renders
- Agency overview → About page: links to
- Services list → Work page: links to
- Gulf port hubs → Unsplash images: loads images
- Services list → Unsplash images: loads images