# olmedo-ux/oda-agency-website architecture

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

- Interactive diagram: https://gitdiagram.com/olmedo-ux/oda-agency-website
- Repository: https://github.com/olmedo-ux/oda-agency-website

## Overview

ODA is a digital-agency showcase website. Visitors enter through the React app, browse agency services and portfolio content, view project details or advice, and can reach the agency through its contact section or WhatsApp action. The sampled app source confirms the routes and rendered sections; the README describes only the React/Vite template, and unsampled component internals limit claims about their interactions.

Main entry points: [`src/App.jsx`](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/App.jsx) (Routes and layout), [`src/main.jsx`](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/main.jsx) (React entry), [`src/components/Services.jsx`](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Services.jsx) (Services), [`src/components/Navbar.jsx`](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Navbar.jsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app_shell["Routes and layout<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_content["Agency content"]
  node_hero["Landing hero<br/>[Hero.jsx]"]
  node_services["Services<br/>[Services.jsx]"]
  node_portfolio["Portfolio<br/>[Portfolio.jsx]"]
  node_project_details["Project details<br/>[ProjectDetails.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
  node_about["About agency<br/>[About.jsx]"]
  node_tips["Advice articles<br/>[Tips.jsx]"]
  node_agency_data["Content data<br/>[data.js]"]
end

subgraph group_engagement["Visitor engagement"]
  node_contact["Contact section<br/>[Contact.jsx]"]
  node_whatsapp["WhatsApp action<br/>[WhatsAppButton.jsx]"]
  node_footer["Agency footer<br/>[Footer.jsx]"]
end

subgraph group_internal["UI utilities"]
  node_scroll_top["Scroll reset<br/>[ScrollToTop.jsx]"]
  node_fade_hook["Fade-in hook<br/>[useFadeIn.js]"]
end

node_visitor(("Website visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts"| node_app_shell
node_app_shell -->|"renders"| node_navbar
node_app_shell -->|"renders"| node_hero
node_app_shell -->|"renders"| node_services
node_app_shell -->|"renders"| node_portfolio
node_app_shell -->|"renders"| node_testimonials
node_app_shell -->|"renders"| node_about
node_app_shell -->|"renders"| node_contact
node_app_shell -->|"routes"| node_project_details
node_app_shell -->|"routes"| node_tips
node_app_shell -->|"renders"| node_whatsapp
node_app_shell -->|"renders"| node_footer
node_app_shell -->|"renders"| node_scroll_top
node_services -->|"reads services"| node_agency_data

click node_entry "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/main.jsx"
click node_app_shell "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/App.jsx"
click node_navbar "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Hero.jsx"
click node_services "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Services.jsx"
click node_portfolio "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Portfolio.jsx"
click node_project_details "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/ProjectDetails.jsx"
click node_testimonials "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Testimonials.jsx"
click node_about "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/About.jsx"
click node_tips "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Tips.jsx"
click node_agency_data "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/data.js"
click node_contact "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Contact.jsx"
click node_whatsapp "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/WhatsAppButton.jsx"
click node_footer "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Footer.jsx"
click node_scroll_top "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/hooks/ScrollToTop.jsx"
click node_fade_hook "https://github.com/olmedo-ux/oda-agency-website/blob/main/src/hooks/useFadeIn.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_entry,node_app_shell,node_navbar toneBlue
class node_hero,node_services,node_portfolio,node_project_details,node_testimonials,node_about,node_tips,node_agency_data toneAmber
class node_contact,node_whatsapp,node_footer toneMint
class node_scroll_top,node_fade_hook toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/main.jsx): `src/main.jsx`
- [Routes and layout](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Agency content

- [Landing hero](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Services](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Services.jsx): `src/components/Services.jsx`
- [Portfolio](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Portfolio.jsx): `src/components/Portfolio.jsx`
- [Project details](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/ProjectDetails.jsx): `src/components/ProjectDetails.jsx`
- [Testimonials](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Testimonials.jsx): `src/components/Testimonials.jsx`
- [About agency](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Advice articles](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Tips.jsx): `src/components/Tips.jsx`
- [Content data](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/data.js): `src/data.js`

### Visitor engagement

- [Contact section](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [WhatsApp action](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/WhatsAppButton.jsx): `src/components/WhatsAppButton.jsx`
- [Agency footer](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### UI utilities

- [Scroll reset](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/hooks/ScrollToTop.jsx): `src/hooks/ScrollToTop.jsx`
- [Fade-in hook](https://github.com/olmedo-ux/oda-agency-website/blob/main/src/hooks/useFadeIn.js): `src/hooks/useFadeIn.js`

### Other components

- **Website visitor**

## Connections

- Website visitor → React entry: opens site
- React entry → Routes and layout: mounts
- Routes and layout → Navigation: renders
- Routes and layout → Landing hero: renders
- Routes and layout → Services: renders
- Routes and layout → Portfolio: renders
- Routes and layout → Testimonials: renders
- Routes and layout → About agency: renders
- Routes and layout → Contact section: renders
- Routes and layout → Project details: routes
- Routes and layout → Advice articles: routes
- Routes and layout → WhatsApp action: renders
- Routes and layout → Agency footer: renders
- Routes and layout → Scroll reset: renders
- Services → Content data: reads services