# hasibdurjoy/circle-inc-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/hasibdurjoy/circle-inc-frontend
- Repository: https://github.com/hasibdurjoy/circle-inc-frontend

## Overview

This is a Next.js marketing site for Circle Incorporated. A visitor opens the home route, which renders the homepage inside a shared layout with navigation and footer. The homepage component tree contains sections for services, capabilities, team, values, work, and contact. The sampled files do not show how HomepageOverview composes those sections, so those internal links are omitted; no backend or persistent state is evident in the sampled runtime.

Main entry points: [`src/Layouts/CustomLayout.tsx`](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Layouts/CustomLayout.tsx) (Custom layout), [`src/app/page.tsx`](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/app/page.tsx) (Home route), [`src/app/layout.tsx`](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/app/layout.tsx) (Root layout), [`src/Components/Shared/Navbar/Navbar.tsx`](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/Shared/Navbar/Navbar.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Page and layout"]
  node_home["Home route<br/>[page.tsx]"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_custom["Custom layout<br/>[CustomLayout.tsx]"]
end

subgraph group_shared["Shared chrome"]
  node_nav["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_homepage["Homepage content"]
  node_overview["Homepage overview"]
  node_banner["Banner<br/>[Banner.tsx]"]
  node_carousel["Carousel<br/>[Carousel.tsx]"]
  node_services["Ecommerce services<br/>[Services.tsx]"]
  node_offers["Service offers<br/>[WhatWeOffer.tsx]"]
  node_other["Other services<br/>[OtherServices.tsx]"]
  node_expertise["Technology expertise<br/>[ExpertWith.tsx]"]
  node_work["Latest work<br/>[LatestWorks.tsx]"]
  node_team["Our team<br/>[OurTeam.tsx]"]
  node_values["Our values<br/>[OurValues.tsx]"]
  node_process["How we work<br/>[HowWeWork.tsx]"]
  node_contact["Contact section<br/>[Contact.tsx]"]
  node_dropshipping["Dropshipping ad<br/>[DropshippingAd.tsx]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"wraps content"| node_custom
node_home -->|"renders"| node_overview
node_custom -->|"renders"| node_nav
node_custom -->|"renders"| node_footer
node_custom -->|"nested in"| node_layout

click node_home "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/app/page.tsx"
click node_layout "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/app/layout.tsx"
click node_custom "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Layouts/CustomLayout.tsx"
click node_nav "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/Shared/Navbar/Navbar.tsx"
click node_footer "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/Shared/Footer/Footer.tsx"
click node_overview "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/HomepageOverview.tsx"
click node_banner "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Banner.tsx"
click node_carousel "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Carousel.tsx"
click node_services "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Services.tsx"
click node_offers "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/WhatWeOffer.tsx"
click node_other "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/OtherServices.tsx"
click node_expertise "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/ExpertWith.tsx"
click node_work "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/LatestWorks.tsx"
click node_team "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/OurTeam.tsx"
click node_values "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/OurValues.tsx"
click node_process "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/HowWeWork.tsx"
click node_contact "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Contact.tsx"
click node_dropshipping "https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/DropshippingAd.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_home,node_layout,node_custom toneBlue
class node_nav,node_footer toneAmber
class node_overview,node_banner,node_carousel,node_services,node_offers,node_other,node_expertise,node_work,node_team,node_values,node_process,node_contact,node_dropshipping toneMint
class node_visitor toneIndigo
```

## Components

### Page and layout

- [Home route](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Root layout](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Custom layout](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Layouts/CustomLayout.tsx): `src/Layouts/CustomLayout.tsx`

### Shared chrome

- [Navigation](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/Shared/Navbar/Navbar.tsx): `src/Components/Shared/Navbar/Navbar.tsx`
- [Footer](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/Shared/Footer/Footer.tsx): `src/Components/Shared/Footer/Footer.tsx`

### Homepage content

- [Homepage overview](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/HomepageOverview.tsx): `src/Components/HomepageComponents/HomepageOverview.tsx`
- [Banner](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Banner.tsx): `src/Components/HomepageComponents/Banner.tsx`
- [Carousel](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Carousel.tsx): `src/Components/HomepageComponents/Carousel.tsx`
- [Ecommerce services](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Services.tsx): `src/Components/HomepageComponents/Services.tsx`
- [Service offers](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/WhatWeOffer.tsx): `src/Components/HomepageComponents/WhatWeOffer.tsx`
- [Other services](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/OtherServices.tsx): `src/Components/HomepageComponents/OtherServices.tsx`
- [Technology expertise](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/ExpertWith.tsx): `src/Components/HomepageComponents/ExpertWith.tsx`
- [Latest work](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/LatestWorks.tsx): `src/Components/HomepageComponents/LatestWorks.tsx`
- [Our team](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/OurTeam.tsx): `src/Components/HomepageComponents/OurTeam.tsx`
- [Our values](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/OurValues.tsx): `src/Components/HomepageComponents/OurValues.tsx`
- [How we work](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/HowWeWork.tsx): `src/Components/HomepageComponents/HowWeWork.tsx`
- [Contact section](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/Contact.tsx): `src/Components/HomepageComponents/Contact.tsx`
- [Dropshipping ad](https://github.com/hasibdurjoy/circle-inc-frontend/blob/main/src/Components/HomepageComponents/DropshippingAd.tsx): `src/Components/HomepageComponents/DropshippingAd.tsx`

### Other components

- **Site visitor**

## Connections

- Site visitor → Home route: opens
- Home route → Custom layout: wraps content
- Home route → Homepage overview: renders
- Custom layout → Navigation: renders
- Custom layout → Footer: renders
- Custom layout → Root layout: nested in