# mvddmn/aidance-web architecture

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

## Overview

Aidance is a digital-marketing brand portfolio site. The browser entry renders a single page of service, portfolio, process, about, testimonial, and contact sections; visitors can browse the agency’s work and submit a contact inquiry. The contact form manages state, checks for spam, validates input, and sends an email. The graph preserves the documented page branches and sampled rendering helpers; unsampled section internals and email-provider wiring are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/mvddmn/aidance-web/blob/main/src/App.tsx) (Page composition), [`src/components/sections/Services.tsx`](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Services.tsx) (Services), [`src/components/contact/ContactForm.tsx`](https://github.com/mvddmn/aidance-web/blob/main/src/components/contact/ContactForm.tsx) (Contact form), [`src/components/sections/Portfolio.tsx`](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Portfolio.tsx) (Portfolio)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Page experience"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Page composition<br/>[App.tsx]"]
  node_layout["Page layout<br/>[PageLayout.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
end

subgraph group_content["Content sections"]
  node_services["Services<br/>[Services.tsx]"]
  node_service_data["Service catalogue<br/>[services.ts]"]
  node_portfolio["Portfolio<br/>[Portfolio.tsx]"]
  node_portfolio_data["Portfolio entries<br/>[portfolio.ts]"]
  node_process["Process<br/>[Process.tsx]"]
  node_process_data["Process steps<br/>[process.ts]"]
  node_about["About<br/>[About.tsx]"]
  node_company_data["Company details<br/>[company.ts]"]
  node_testimonials["Testimonials<br/>[Testimonials.tsx]"]
end

subgraph group_presentation["Presentation"]
  node_service_card["Service card<br/>[ServiceCard.tsx]"]
  node_portfolio_card["Portfolio card<br/>[PortfolioCard.tsx]"]
  node_section_wrapper["Section wrapper<br/>[Section.tsx]"]
  node_heading["Section heading<br/>[Heading.tsx]"]
end

subgraph group_inquiry["Contact inquiry"]
  node_contact_section["Contact section<br/>[Contact.tsx]"]
  node_contact_form["Contact form<br/>[ContactForm.tsx]"]
  node_form_state["Form state<br/>[useContactForm.ts]"]
  node_validation["Form validation<br/>[validator.ts]"]
  node_email["Email sender<br/>[email.ts]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"wraps page"| node_layout
node_app -->|"renders"| node_services
node_app -->|"renders"| node_portfolio
node_app -->|"renders"| node_process
node_app -->|"renders"| node_about
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_contact_section
node_layout -->|"renders"| node_navigation
node_services -->|"maps data"| node_service_data
node_services -->|"renders"| node_service_card
node_portfolio -->|"reads data"| node_portfolio_data
node_portfolio -->|"renders"| node_portfolio_card
node_process -->|"reads data"| node_process_data
node_about -->|"reads data"| node_company_data
node_services -->|"uses"| node_section_wrapper
node_services -->|"renders"| node_heading
node_contact_section -->|"renders"| node_contact_form
node_contact_form -->|"manages state"| node_form_state
node_contact_form -->|"validates input"| node_validation
node_contact_form -->|"sends inquiry"| node_email

click node_entry "https://github.com/mvddmn/aidance-web/blob/main/src/main.tsx"
click node_app "https://github.com/mvddmn/aidance-web/blob/main/src/App.tsx"
click node_layout "https://github.com/mvddmn/aidance-web/blob/main/src/components/layout/PageLayout.tsx"
click node_navigation "https://github.com/mvddmn/aidance-web/blob/main/src/components/layout/Navbar.tsx"
click node_services "https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Services.tsx"
click node_service_data "https://github.com/mvddmn/aidance-web/blob/main/src/data/services.ts"
click node_portfolio "https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Portfolio.tsx"
click node_portfolio_data "https://github.com/mvddmn/aidance-web/blob/main/src/data/portfolio.ts"
click node_process "https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Process.tsx"
click node_process_data "https://github.com/mvddmn/aidance-web/blob/main/src/data/process.ts"
click node_about "https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/About.tsx"
click node_company_data "https://github.com/mvddmn/aidance-web/blob/main/src/data/company.ts"
click node_testimonials "https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Testimonials.tsx"
click node_contact_section "https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Contact.tsx"
click node_contact_form "https://github.com/mvddmn/aidance-web/blob/main/src/components/contact/ContactForm.tsx"
click node_form_state "https://github.com/mvddmn/aidance-web/blob/main/src/hooks/useContactForm.ts"
click node_validation "https://github.com/mvddmn/aidance-web/blob/main/src/utils/validator.ts"
click node_email "https://github.com/mvddmn/aidance-web/blob/main/src/services/email.ts"
click node_service_card "https://github.com/mvddmn/aidance-web/blob/main/src/components/services/ServiceCard.tsx"
click node_portfolio_card "https://github.com/mvddmn/aidance-web/blob/main/src/components/portfolio/PortfolioCard.tsx"
click node_section_wrapper "https://github.com/mvddmn/aidance-web/blob/main/src/components/common/Section.tsx"
click node_heading "https://github.com/mvddmn/aidance-web/blob/main/src/components/common/Heading.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_entry,node_app,node_layout,node_navigation toneBlue
class node_services,node_service_data,node_portfolio,node_portfolio_data,node_process,node_process_data,node_about,node_company_data,node_testimonials toneAmber
class node_service_card,node_portfolio_card,node_section_wrapper,node_heading toneMint
class node_contact_section,node_contact_form,node_form_state,node_validation,node_email toneRose
class node_visitor toneIndigo
```

## Components

### Page experience

- [React entry](https://github.com/mvddmn/aidance-web/blob/main/src/main.tsx): `src/main.tsx`
- [Page composition](https://github.com/mvddmn/aidance-web/blob/main/src/App.tsx): `src/App.tsx`
- [Page layout](https://github.com/mvddmn/aidance-web/blob/main/src/components/layout/PageLayout.tsx): `src/components/layout/PageLayout.tsx`
- [Navigation](https://github.com/mvddmn/aidance-web/blob/main/src/components/layout/Navbar.tsx): `src/components/layout/Navbar.tsx`

### Content sections

- [Services](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Services.tsx): `src/components/sections/Services.tsx`
- [Service catalogue](https://github.com/mvddmn/aidance-web/blob/main/src/data/services.ts): `src/data/services.ts`
- [Portfolio](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Portfolio.tsx): `src/components/sections/Portfolio.tsx`
- [Portfolio entries](https://github.com/mvddmn/aidance-web/blob/main/src/data/portfolio.ts): `src/data/portfolio.ts`
- [Process](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Process.tsx): `src/components/sections/Process.tsx`
- [Process steps](https://github.com/mvddmn/aidance-web/blob/main/src/data/process.ts): `src/data/process.ts`
- [About](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/About.tsx): `src/components/sections/About.tsx`
- [Company details](https://github.com/mvddmn/aidance-web/blob/main/src/data/company.ts): `src/data/company.ts`
- [Testimonials](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Testimonials.tsx): `src/components/sections/Testimonials.tsx`

### Presentation

- [Service card](https://github.com/mvddmn/aidance-web/blob/main/src/components/services/ServiceCard.tsx): `src/components/services/ServiceCard.tsx`
- [Portfolio card](https://github.com/mvddmn/aidance-web/blob/main/src/components/portfolio/PortfolioCard.tsx): `src/components/portfolio/PortfolioCard.tsx`
- [Section wrapper](https://github.com/mvddmn/aidance-web/blob/main/src/components/common/Section.tsx): `src/components/common/Section.tsx`
- [Section heading](https://github.com/mvddmn/aidance-web/blob/main/src/components/common/Heading.tsx): `src/components/common/Heading.tsx`

### Contact inquiry

- [Contact section](https://github.com/mvddmn/aidance-web/blob/main/src/components/sections/Contact.tsx): `src/components/sections/Contact.tsx`
- [Contact form](https://github.com/mvddmn/aidance-web/blob/main/src/components/contact/ContactForm.tsx): `src/components/contact/ContactForm.tsx`
- [Form state](https://github.com/mvddmn/aidance-web/blob/main/src/hooks/useContactForm.ts): `src/hooks/useContactForm.ts`
- [Form validation](https://github.com/mvddmn/aidance-web/blob/main/src/utils/validator.ts): `src/utils/validator.ts`
- [Email sender](https://github.com/mvddmn/aidance-web/blob/main/src/services/email.ts): `src/services/email.ts`

### Other components

- **Site visitor**

## Connections

- Site visitor → React entry: opens site
- React entry → Page composition: renders (evidence: `src/main.tsx`)
- Page composition → Page layout: wraps page (evidence: `src/App.tsx`)
- Page composition → Services: renders (evidence: `src/App.tsx`)
- Page composition → Portfolio: renders (evidence: `src/App.tsx`)
- Page composition → Process: renders (evidence: `src/App.tsx`)
- Page composition → About: renders (evidence: `src/App.tsx`)
- Page composition → Testimonials: renders (evidence: `src/App.tsx`)
- Page composition → Contact section: renders (evidence: `src/App.tsx`)
- Page layout → Navigation: renders (evidence: `src/components/layout/PageLayout.tsx`)
- Services → Service catalogue: maps data (evidence: `src/components/sections/Services.tsx`)
- Services → Service card: renders (evidence: `src/components/sections/Services.tsx`)
- Portfolio → Portfolio entries: reads data (evidence: `src/components/sections/Portfolio.tsx`)
- Portfolio → Portfolio card: renders (evidence: `src/components/sections/Portfolio.tsx`)
- Process → Process steps: reads data (evidence: `src/components/sections/Process.tsx`)
- About → Company details: reads data (evidence: `src/components/sections/About.tsx`)
- Services → Section wrapper: uses (evidence: `src/components/sections/Services.tsx`)
- Services → Section heading: renders (evidence: `src/components/sections/Services.tsx`)
- Contact section → Contact form: renders (evidence: `src/components/sections/Contact.tsx`)
- Contact form → Form state: manages state (evidence: `src/components/contact/ContactForm.tsx`)
- Contact form → Form validation: validates input (evidence: `src/components/contact/ContactForm.tsx`)
- Contact form → Email sender: sends inquiry (evidence: `src/components/contact/ContactForm.tsx`)