# ivanpavlovic-web/rolo-product architecture

> Architecture diagram of the GitHub repository ivanpavlovic-web/rolo-product, 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/ivanpavlovic-web/rolo-product
- Repository: https://github.com/ivanpavlovic-web/rolo-product

## Overview

This repository is a React single-page site for a PVC/door-panel business: visitors browse the company’s services, work, customer feedback, and answers, then reach its contact information. `src/App.tsx` is the sampled page composer and renders the principal sections and footer. The README is only the Vite template README, so product capabilities are inferred from the section names and sampled code; unsampled sections are included as page components, but their internal behavior and integrations are not asserted.

Main entry points: [`src/App.tsx`](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/App.tsx) (Page composer), [`src/sections/Services.tsx`](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Services.tsx) (Services), [`src/main.tsx`](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/main.tsx) (React mount), [`src/sections/Gallery.tsx`](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Gallery.tsx) (Project gallery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Page entry"]
  node_main["React mount<br/>[main.tsx]"]
  node_app["Page composer<br/>[App.tsx]"]
end

subgraph group_offer["Business presentation"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_services["Services<br/>[Services.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_doorpanels["Door panels<br/>[DoorPanels.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
end

subgraph group_proof["Work and trust"]
  node_gallery["Project gallery<br/>[Gallery.tsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.tsx]"]
  node_faq["FAQ<br/>[FAQ.tsx]"]
  node_footer["Footer and legal<br/>[Footer.tsx]"]
end

subgraph group_shared["Shared UI and content"]
  node_service_data["Service content<br/>[data.ts]"]
  node_site_content["Site content<br/>[site.ts]"]
  node_carousel["Carousel controls<br/>[carousel.tsx]"]
  node_inview["Visibility hook<br/>[useInView.ts]"]
  node_gallery_assets["Gallery images"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_services
node_app -->|"renders"| node_about
node_app -->|"renders"| node_gallery
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_faq
node_app -->|"renders"| node_doorpanels
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_services -->|"reads services"| node_service_data
node_services -->|"uses controls"| node_carousel
node_services -->|"checks visibility"| node_inview
node_gallery -->|"loads images"| node_gallery_assets
node_footer -->|"reads site details"| node_site_content

click node_main "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/main.tsx"
click node_app "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/App.tsx"
click node_hero "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Hero.tsx"
click node_services "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Services.tsx"
click node_about "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/About.tsx"
click node_doorpanels "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/DoorPanels.tsx"
click node_contact "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Contact.tsx"
click node_gallery "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Gallery.tsx"
click node_testimonials "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Testimonials.tsx"
click node_faq "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/FAQ.tsx"
click node_footer "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/components/Footer.tsx"
click node_service_data "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/types/data.ts"
click node_site_content "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/site.ts"
click node_carousel "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/components/ui/carousel.tsx"
click node_inview "https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/hooks/useInView.ts"
click node_gallery_assets "https://github.com/ivanpavlovic-web/rolo-product/tree/main/public/galerija"

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_main,node_app toneBlue
class node_hero,node_services,node_about,node_doorpanels,node_contact toneAmber
class node_gallery,node_testimonials,node_faq,node_footer toneMint
class node_service_data,node_site_content,node_carousel,node_inview,node_gallery_assets toneRose
class node_visitor toneIndigo
```

## Components

### Page entry

- [React mount](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/main.tsx): `src/main.tsx`
- [Page composer](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/App.tsx): `src/App.tsx`

### Business presentation

- [Hero](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Hero.tsx): `src/sections/Hero.tsx`
- [Services](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Services.tsx): `src/sections/Services.tsx`
- [About](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/About.tsx): `src/sections/About.tsx`
- [Door panels](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/DoorPanels.tsx): `src/sections/DoorPanels.tsx`
- [Contact](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Contact.tsx): `src/sections/Contact.tsx`

### Work and trust

- [Project gallery](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Gallery.tsx): `src/sections/Gallery.tsx`
- [Testimonials](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/Testimonials.tsx): `src/sections/Testimonials.tsx`
- [FAQ](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/sections/FAQ.tsx): `src/sections/FAQ.tsx`
- [Footer and legal](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Shared UI and content

- [Service content](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/types/data.ts): `src/types/data.ts`
- [Site content](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/site.ts): `src/site.ts`
- [Carousel controls](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/components/ui/carousel.tsx): `src/components/ui/carousel.tsx`
- [Visibility hook](https://github.com/ivanpavlovic-web/rolo-product/blob/main/src/hooks/useInView.ts): `src/hooks/useInView.ts`
- [Gallery images](https://github.com/ivanpavlovic-web/rolo-product/tree/main/public/galerija): `public/galerija`

### Other components

- **Site visitor**

## Connections

- Site visitor → React mount: opens site
- React mount → Page composer: mounts
- Page composer → Hero: renders
- Page composer → Services: renders
- Page composer → About: renders
- Page composer → Project gallery: renders
- Page composer → Testimonials: renders
- Page composer → FAQ: renders
- Page composer → Door panels: renders
- Page composer → Contact: renders
- Page composer → Footer and legal: renders
- Services → Service content: reads services
- Services → Carousel controls: uses controls
- Services → Visibility hook: checks visibility
- Project gallery → Gallery images: loads images
- Footer and legal → Site content: reads site details