# aravindbonda/professional--template-collection architecture

> Architecture diagram of the GitHub repository aravindbonda/professional--template-collection, 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/aravindbonda/professional--template-collection
- Repository: https://github.com/aravindbonda/professional--template-collection

## Overview

This is a React portfolio and marketplace for browsing business website templates, viewing industry-specific demos, and contacting the creator. The principal flow is visitor → routed collection or template page → template content; shared layout provides navigation and footer. The tree and sampled files identify the route wiring and several capabilities, but most page implementations were not sampled, so links from pages to their section components or data are not asserted.

Main entry points: [`src/App.js`](https://github.com/aravindbonda/professional--template-collection/blob/master/src/App.js) (Route application), [`src/components/layout/Layout/Layout.js`](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Layout/Layout.js) (Shared layout), [`src/components/layout/Header/Header.js`](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Header/Header.js) (Navigation header), [`src/components/layout/Footer/Footer.js`](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Footer/Footer.js) (Footer links)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and layout"]
  node_app["Route application<br/>[App.js]"]
  node_layout["Shared layout<br/>[Layout.js]"]
  node_header["Navigation header<br/>[Header.js]"]
  node_footer["Footer links<br/>[Footer.js]"]
end

subgraph group_marketplace["Template marketplace"]
  node_home["Collection home<br/>[HomePage.js]"]
  node_marketplacehero["Marketplace hero<br/>[MarketplaceHero.js]"]
  node_showcase["Template showcase"]
  node_templatecatalog["Template catalog data"]
  node_aboutpage["About page<br/>[AboutPage.js]"]
end

subgraph group_demos["Industry demos"]
  node_hospital["Hospital template<br/>[HospitalPage.js]"]
  node_hospitalcontent["Hospital sections"]
  node_restaurant["Restaurant template<br/>[RestaurantPage.js]"]
  node_restaurantcontent["Restaurant sections"]
  node_restaurantdata["Restaurant content data"]
  node_estate["Real-estate template<br/>[RealEstatePage.js]"]
  node_estatecontent["Property sections"]
  node_school["School template<br/>[SchoolPage.js]"]
  node_schoolcontent["School sections"]
  node_gym["Gym template<br/>[GymPage.js]"]
  node_gymcontent["Gym sections<br/>[GymSections.js]"]
end

subgraph group_content["Shared content"]
  node_contactpage["Contact page<br/>[ContactPage.js]"]
  node_contactform["Contact form<br/>[ContactForm.js]"]
  node_faq["Shared FAQs<br/>[FAQSection.js]"]
  node_aboutcontent["About sections<br/>[AboutSections.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders routes within"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_aboutpage
node_app -->|"routes to"| node_contactpage
node_app -->|"routes to"| node_hospital
node_app -->|"routes to"| node_restaurant
node_app -->|"routes to"| node_estate
node_app -->|"routes to"| node_school
node_app -->|"routes to"| node_gym
node_app -->|"redirects unknown paths"| node_layout
node_visitor -->|"uses navigation"| node_header
node_visitor -->|"uses links"| node_footer
node_visitor -->|"submits enquiry"| node_contactform

click node_app "https://github.com/aravindbonda/professional--template-collection/blob/master/src/App.js"
click node_layout "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Layout/Layout.js"
click node_header "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Header/Header.js"
click node_footer "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Footer/Footer.js"
click node_home "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/HomePage.js"
click node_marketplacehero "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/home/MarketplaceHero/MarketplaceHero.js"
click node_showcase "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/home/TemplateShowcase/TemplateShowcase.js"
click node_templatecatalog "https://github.com/aravindbonda/professional--template-collection/blob/master/src/data/marketplaceTemplates.js"
click node_aboutpage "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/AboutPage.js"
click node_contactpage "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/ContactPage.js"
click node_contactform "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/common/ContactForm/ContactForm.js"
click node_faq "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/common/FAQSection/FAQSection.js"
click node_hospital "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/HospitalPage.js"
click node_hospitalcontent "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/hospital/HospitalSections.js"
click node_restaurant "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/RestaurantPage.js"
click node_restaurantcontent "https://github.com/aravindbonda/professional--template-collection/tree/master/src/components/restaurant"
click node_restaurantdata "https://github.com/aravindbonda/professional--template-collection/tree/master/src/data/restaurant"
click node_estate "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/RealEstatePage.js"
click node_estatecontent "https://github.com/aravindbonda/professional--template-collection/tree/master/src/components/real-estate"
click node_school "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/SchoolPage.js"
click node_schoolcontent "https://github.com/aravindbonda/professional--template-collection/tree/master/src/components/school"
click node_gym "https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/GymPage.js"
click node_gymcontent "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/gym/GymSections.js"
click node_aboutcontent "https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/about/AboutSections.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_app,node_layout,node_header,node_footer toneBlue
class node_home,node_marketplacehero,node_showcase,node_templatecatalog,node_aboutpage toneAmber
class node_hospital,node_hospitalcontent,node_restaurant,node_restaurantcontent,node_restaurantdata,node_estate,node_estatecontent,node_school,node_schoolcontent,node_gym,node_gymcontent toneMint
class node_contactpage,node_contactform,node_faq,node_aboutcontent toneRose
class node_visitor toneIndigo
```

## Components

### Routing and layout

- [Route application](https://github.com/aravindbonda/professional--template-collection/blob/master/src/App.js): `src/App.js`
- [Shared layout](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Layout/Layout.js): `src/components/layout/Layout/Layout.js`
- [Navigation header](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Header/Header.js): `src/components/layout/Header/Header.js`
- [Footer links](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/layout/Footer/Footer.js): `src/components/layout/Footer/Footer.js`

### Template marketplace

- [Collection home](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/HomePage.js): `src/pages/HomePage.js`
- [Marketplace hero](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/home/MarketplaceHero/MarketplaceHero.js): `src/components/home/MarketplaceHero/MarketplaceHero.js`
- [Template showcase](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/home/TemplateShowcase/TemplateShowcase.js): `src/components/home/TemplateShowcase/TemplateShowcase.js`
- [Template catalog data](https://github.com/aravindbonda/professional--template-collection/blob/master/src/data/marketplaceTemplates.js): `src/data/marketplaceTemplates.js`
- [About page](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/AboutPage.js): `src/pages/AboutPage.js`

### Industry demos

- [Hospital template](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/HospitalPage.js): `src/pages/HospitalPage.js`
- [Hospital sections](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/hospital/HospitalSections.js): `src/components/hospital/HospitalSections.js`
- [Restaurant template](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/RestaurantPage.js): `src/pages/RestaurantPage.js`
- [Restaurant sections](https://github.com/aravindbonda/professional--template-collection/tree/master/src/components/restaurant): `src/components/restaurant`
- [Restaurant content data](https://github.com/aravindbonda/professional--template-collection/tree/master/src/data/restaurant): `src/data/restaurant`
- [Real-estate template](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/RealEstatePage.js): `src/pages/RealEstatePage.js`
- [Property sections](https://github.com/aravindbonda/professional--template-collection/tree/master/src/components/real-estate): `src/components/real-estate`
- [School template](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/SchoolPage.js): `src/pages/SchoolPage.js`
- [School sections](https://github.com/aravindbonda/professional--template-collection/tree/master/src/components/school): `src/components/school`
- [Gym template](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/GymPage.js): `src/pages/GymPage.js`
- [Gym sections](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/gym/GymSections.js): `src/components/gym/GymSections.js`

### Shared content

- [Contact page](https://github.com/aravindbonda/professional--template-collection/blob/master/src/pages/ContactPage.js): `src/pages/ContactPage.js`
- [Contact form](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/common/ContactForm/ContactForm.js): `src/components/common/ContactForm/ContactForm.js`
- [Shared FAQs](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/common/FAQSection/FAQSection.js): `src/components/common/FAQSection/FAQSection.js`
- [About sections](https://github.com/aravindbonda/professional--template-collection/blob/master/src/components/about/AboutSections.js): `src/components/about/AboutSections.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → Route application: opens site
- Route application → Shared layout: renders routes within
- Route application → Collection home: routes to
- Route application → About page: routes to
- Route application → Contact page: routes to
- Route application → Hospital template: routes to
- Route application → Restaurant template: routes to
- Route application → Real-estate template: routes to
- Route application → School template: routes to
- Route application → Gym template: routes to
- Route application → Shared layout: redirects unknown paths
- Site visitor → Navigation header: uses navigation
- Site visitor → Footer links: uses links
- Site visitor → Contact form: submits enquiry