# fjmahesa/inmarco-website architecture

> Architecture diagram of the GitHub repository fjmahesa/inmarco-website, 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/fjmahesa/inmarco-website
- Repository: https://github.com/fjmahesa/inmarco-website

## Overview

INMARCO’s React frontend presents company information and business services through a routed marketing site. Visitors enter the shared app shell, navigate the home, about, or services pages, and can submit a contact inquiry in the footer. The active home page highlights MICE, consulting, digital ecosystem, and security offerings, plus client and partner logos. The graph reflects visible routing and page composition; source excerpts do not establish deeper service execution or the contact API’s implementation.

Main entry points: [`src/pages/HomePage.jsx`](https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/HomePage.jsx) (Home page), [`src/App.jsx`](https://github.com/fjmahesa/inmarco-website/blob/main/src/App.jsx) (Router shell), [`src/pages/AboutPage.jsx`](https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/AboutPage.jsx) (About page), [`src/components/layout/Footer.jsx`](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/layout/Footer.jsx) (Contact footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["Router shell<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Contact footer<br/>[Footer.jsx]"]
  node_fade["Reveal animation<br/>[FadeInSection.jsx]"]
end

subgraph group_pages["Routed pages"]
  node_home["Home page<br/>[HomePage.jsx]"]
  node_aboutpage["About page<br/>[AboutPage.jsx]"]
  node_servicespage["Services page<br/>[ServicesPage.jsx]"]
  node_notfound["Not found<br/>[NotFoundPage.jsx]"]
end

subgraph group_offerings["Business offerings"]
  node_hero["Home hero<br/>[HeroSection.jsx]"]
  node_pillars["Business pillars"]
  node_mice["MICE services"]
  node_consulting["Consulting strategy"]
  node_digital["Digital ecosystem"]
  node_securityservices["Security services"]
  node_securitymatrix["Security matrix"]
end

subgraph group_trust["Company and trust"]
  node_companybrief["Company brief<br/>[AboutUsBrief.jsx]"]
  node_aboutus["Company profile<br/>[AboutUs.jsx]"]
  node_abouthero["About introduction"]
  node_sio["SIO document<br/>[SioPdfSection.jsx]"]
  node_clientlogos["Client logos<br/>[ClientLogos.jsx]"]
  node_pemda["Government logos<br/>[PemdaBumdLogos.jsx]"]
  node_education["Education logos<br/>[EducationLogos.jsx]"]
  node_corporatelogos["Corporate logos<br/>[CorporateLogos.jsx]"]
  node_instagram["Instagram feed<br/>[InstagramFeed.jsx]"]
end

node_visitor(("Site visitor"))
node_contactapi{{"Contact API"}}

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_aboutpage
node_app -->|"routes to"| node_servicespage
node_app -->|"routes to"| node_notfound
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_companybrief
node_home -->|"renders"| node_pillars
node_home -->|"renders"| node_mice
node_home -->|"renders"| node_consulting
node_home -->|"renders"| node_digital
node_home -->|"renders"| node_securityservices
node_home -->|"renders"| node_securitymatrix
node_home -->|"renders"| node_instagram
node_home -->|"renders"| node_clientlogos
node_home -->|"renders"| node_pemda
node_home -->|"renders"| node_education
node_home -->|"renders"| node_corporatelogos
node_aboutpage -->|"renders"| node_abouthero
node_aboutpage -->|"renders"| node_aboutus
node_aboutpage -->|"renders"| node_sio
node_footer -->|"posts inquiry"| node_contactapi

click node_app "https://github.com/fjmahesa/inmarco-website/blob/main/src/App.jsx"
click node_navbar "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/layout/Navbar.jsx"
click node_footer "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/layout/Footer.jsx"
click node_fade "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/common/FadeInSection.jsx"
click node_home "https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/HomePage.jsx"
click node_aboutpage "https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/AboutPage.jsx"
click node_servicespage "https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/ServicesPage.jsx"
click node_notfound "https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/NotFoundPage.jsx"
click node_hero "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/HeroSection.jsx"
click node_companybrief "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/AboutUsBrief.jsx"
click node_pillars "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/BusinessPillarsSection.jsx"
click node_mice "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/MiceServicesSection.jsx"
click node_consulting "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/ConsultingStrategySection.jsx"
click node_digital "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/DigitalEcosystemSection.jsx"
click node_securityservices "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/SecurityServicesSection.jsx"
click node_securitymatrix "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/SecurityMatrixSection.jsx"
click node_aboutus "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/about/AboutUs.jsx"
click node_abouthero "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/about/AboutHeroSection.jsx"
click node_sio "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/about/SioPdfSection.jsx"
click node_clientlogos "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/ClientLogos.jsx"
click node_pemda "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/PemdaBumdLogos.jsx"
click node_education "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/EducationLogos.jsx"
click node_corporatelogos "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/CorporateLogos.jsx"
click node_instagram "https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/InstagramFeed.jsx"

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_app,node_navbar,node_footer,node_fade toneBlue
class node_home,node_aboutpage,node_servicespage,node_notfound toneAmber
class node_hero,node_pillars,node_mice,node_consulting,node_digital,node_securityservices,node_securitymatrix,node_contactapi toneMint
class node_companybrief,node_aboutus,node_abouthero,node_sio,node_clientlogos,node_pemda,node_education,node_corporatelogos,node_instagram toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [Router shell](https://github.com/fjmahesa/inmarco-website/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/layout/Navbar.jsx): `src/components/layout/Navbar.jsx`
- [Contact footer](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/layout/Footer.jsx): `src/components/layout/Footer.jsx`
- [Reveal animation](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/common/FadeInSection.jsx): `src/components/common/FadeInSection.jsx`

### Routed pages

- [Home page](https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [About page](https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/AboutPage.jsx): `src/pages/AboutPage.jsx`
- [Services page](https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/ServicesPage.jsx): `src/pages/ServicesPage.jsx`
- [Not found](https://github.com/fjmahesa/inmarco-website/blob/main/src/pages/NotFoundPage.jsx): `src/pages/NotFoundPage.jsx`

### Business offerings

- [Home hero](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/HeroSection.jsx): `src/components/sections/home/HeroSection.jsx`
- [Business pillars](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/BusinessPillarsSection.jsx): `src/components/sections/home/BusinessPillarsSection.jsx`
- [MICE services](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/MiceServicesSection.jsx): `src/components/sections/home/MiceServicesSection.jsx`
- [Consulting strategy](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/ConsultingStrategySection.jsx): `src/components/sections/home/ConsultingStrategySection.jsx`
- [Digital ecosystem](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/DigitalEcosystemSection.jsx): `src/components/sections/home/DigitalEcosystemSection.jsx`
- [Security services](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/SecurityServicesSection.jsx): `src/components/sections/home/SecurityServicesSection.jsx`
- [Security matrix](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/SecurityMatrixSection.jsx): `src/components/sections/home/SecurityMatrixSection.jsx`

### Company and trust

- [Company brief](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/AboutUsBrief.jsx): `src/components/sections/home/AboutUsBrief.jsx`
- [Company profile](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/about/AboutUs.jsx): `src/components/sections/about/AboutUs.jsx`
- [About introduction](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/about/AboutHeroSection.jsx): `src/components/sections/about/AboutHeroSection.jsx`
- [SIO document](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/about/SioPdfSection.jsx): `src/components/sections/about/SioPdfSection.jsx`
- [Client logos](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/ClientLogos.jsx): `src/components/sections/home/ClientLogos.jsx`
- [Government logos](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/PemdaBumdLogos.jsx): `src/components/sections/home/PemdaBumdLogos.jsx`
- [Education logos](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/EducationLogos.jsx): `src/components/sections/home/EducationLogos.jsx`
- [Corporate logos](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/CorporateLogos.jsx): `src/components/sections/home/CorporateLogos.jsx`
- [Instagram feed](https://github.com/fjmahesa/inmarco-website/blob/main/src/components/sections/home/InstagramFeed.jsx): `src/components/sections/home/InstagramFeed.jsx`

### Other components

- **Site visitor**
- **Contact API**

## Connections

- Site visitor → Router shell: opens
- Router shell → Navigation: renders (evidence: `src/App.jsx`)
- Router shell → Contact footer: renders (evidence: `src/App.jsx`)
- Router shell → Home page: routes to (evidence: `src/App.jsx`)
- Router shell → About page: routes to (evidence: `src/App.jsx`)
- Router shell → Services page: routes to (evidence: `src/App.jsx`)
- Router shell → Not found: routes to (evidence: `src/App.jsx`)
- Home page → Home hero: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Company brief: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Business pillars: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → MICE services: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Consulting strategy: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Digital ecosystem: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Security services: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Security matrix: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Instagram feed: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Client logos: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Government logos: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Education logos: renders (evidence: `src/pages/HomePage.jsx`)
- Home page → Corporate logos: renders (evidence: `src/pages/HomePage.jsx`)
- About page → About introduction: renders (evidence: `src/pages/AboutPage.jsx`)
- About page → Company profile: renders (evidence: `src/pages/AboutPage.jsx`)
- About page → SIO document: renders (evidence: `src/pages/AboutPage.jsx`)
- Contact footer → Contact API: posts inquiry (evidence: `src/components/layout/Footer.jsx`)