# mcastillogmez/vetplusfelin-landing architecture

> Architecture diagram of the GitHub repository mcastillogmez/vetplusfelin-landing, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mcastillogmez/vetplusfelin-landing
- Repository: https://github.com/mcastillogmez/vetplusfelin-landing

## Overview

VetPlusFelin is a fictional veterinary-clinic landing page, not a booking or follow-up system. A visitor views its composed page, learns about services and benefits, and can follow visual reservation calls to action; the README explicitly says reservations and messaging are not connected to services. The graph preserves the documented content branches and shared rendering layer. Relationships are grounded in excerpts, the SOURCE INDEX, or README; unsampled section implementations are represented by their exact tree paths.

Main entry points: [`src/App.jsx`](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/App.jsx) (Page composition), [`src/sections/CardGridSection.jsx`](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/CardGridSection.jsx) (Card grid), [`src/sections/FinalCta/FinalCta.jsx`](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/FinalCta/FinalCta.jsx) (Final call to action), [`src/components/layout/Header.jsx`](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Header.jsx) (Navigation header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page composition"]
  node_app["Page composition<br/>[App.jsx]"]
end

subgraph group_content["Landing sections"]
  node_hero["Hero<br/>[Hero.jsx]"]
  node_dashboard["Dashboard visual"]
  node_metrics["Credibility metrics<br/>[Metrics.jsx]"]
  node_problems["Problem cards<br/>[Problems.jsx]"]
  node_benefits["Benefits cards<br/>[Benefits.jsx]"]
  node_how["Three-step workflow<br/>[HowItWorks.jsx]"]
  node_specialties["Service specialties<br/>[Specialties.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
  node_faq["FAQ<br/>[Faq.jsx]"]
  node_cta["Final call to action<br/>[FinalCta.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_shared["Shared presentation"]
  node_header["Navigation header<br/>[Header.jsx]"]
  node_cardgrid["Card grid"]
  node_section["Section layout<br/>[Section.jsx]"]
  node_container["Container layout<br/>[Container.jsx]"]
  node_button["Action link<br/>[Button.jsx]"]
  node_reveal["Scroll reveal<br/>[Reveal.jsx]"]
  node_revealhook["Reveal observer<br/>[useReveal.js]"]
  node_sectionheader["Section heading<br/>[SectionHeader.jsx]"]
  node_card["Content card<br/>[Card.jsx]"]
end

subgraph group_copy["Content data"]
  node_navigationdata["Navigation copy<br/>[navigation.js]"]
  node_herodata["Hero and metrics copy<br/>[hero.js]"]
  node_sectionsdata["Section copy<br/>[sections.js]"]
  node_closingdata["CTA and footer copy<br/>[closing.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens page"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_metrics
node_app -->|"renders"| node_problems
node_app -->|"renders"| node_benefits
node_app -->|"renders"| node_how
node_app -->|"renders"| node_specialties
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_faq
node_app -->|"renders"| node_cta
node_app -->|"renders"| node_footer
node_hero -->|"renders"| node_dashboard
node_hero -->|"reads"| node_herodata
node_dashboard -->|"reads"| node_herodata
node_metrics -->|"reads"| node_herodata
node_header -->|"reads"| node_navigationdata
node_header -->|"renders"| node_button
node_header -->|"uses"| node_container
node_problems -->|"uses"| node_cardgrid
node_benefits -->|"uses"| node_cardgrid
node_specialties -->|"uses"| node_cardgrid
node_cardgrid -->|"reads"| node_sectionsdata
node_cardgrid -->|"renders"| node_section
node_cardgrid -->|"renders"| node_sectionheader
node_cardgrid -->|"renders"| node_card
node_how -->|"reads"| node_sectionsdata
node_testimonials -->|"reads"| node_sectionsdata
node_faq -->|"reads"| node_sectionsdata
node_cta -->|"reads"| node_closingdata
node_footer -->|"reads"| node_closingdata
node_cta -->|"renders"| node_button
node_cta -->|"uses"| node_container
node_section -->|"uses"| node_container
node_section -->|"wraps content"| node_reveal
node_reveal -->|"uses"| node_revealhook

click node_app "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/App.jsx"
click node_header "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Header.jsx"
click node_hero "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Hero/Hero.jsx"
click node_dashboard "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Hero/DashboardVisual.jsx"
click node_metrics "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Metrics/Metrics.jsx"
click node_problems "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Problems/Problems.jsx"
click node_benefits "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Benefits/Benefits.jsx"
click node_how "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/HowItWorks/HowItWorks.jsx"
click node_specialties "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Specialties/Specialties.jsx"
click node_testimonials "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Testimonials/Testimonials.jsx"
click node_faq "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Faq/Faq.jsx"
click node_cta "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/FinalCta/FinalCta.jsx"
click node_footer "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Footer/Footer.jsx"
click node_cardgrid "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/CardGridSection.jsx"
click node_section "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Section.jsx"
click node_container "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Container.jsx"
click node_button "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/Button.jsx"
click node_reveal "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/Reveal.jsx"
click node_revealhook "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/hooks/useReveal.js"
click node_sectionheader "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/SectionHeader.jsx"
click node_card "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/Card.jsx"
click node_navigationdata "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/navigation.js"
click node_herodata "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/hero.js"
click node_sectionsdata "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/sections.js"
click node_closingdata "https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/closing.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 toneBlue
class node_hero,node_dashboard,node_metrics,node_problems,node_benefits,node_how,node_specialties,node_testimonials,node_faq,node_cta,node_footer toneAmber
class node_header,node_cardgrid,node_section,node_container,node_button,node_reveal,node_revealhook,node_sectionheader,node_card toneMint
class node_navigationdata,node_herodata,node_sectionsdata,node_closingdata toneRose
class node_visitor toneIndigo
```

## Components

### Page composition

- [Page composition](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/App.jsx): `src/App.jsx`

### Landing sections

- [Hero](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Hero/Hero.jsx): `src/sections/Hero/Hero.jsx`
- [Dashboard visual](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Hero/DashboardVisual.jsx): `src/sections/Hero/DashboardVisual.jsx`
- [Credibility metrics](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Metrics/Metrics.jsx): `src/sections/Metrics/Metrics.jsx`
- [Problem cards](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Problems/Problems.jsx): `src/sections/Problems/Problems.jsx`
- [Benefits cards](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Benefits/Benefits.jsx): `src/sections/Benefits/Benefits.jsx`
- [Three-step workflow](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/HowItWorks/HowItWorks.jsx): `src/sections/HowItWorks/HowItWorks.jsx`
- [Service specialties](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Specialties/Specialties.jsx): `src/sections/Specialties/Specialties.jsx`
- [Testimonials](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Testimonials/Testimonials.jsx): `src/sections/Testimonials/Testimonials.jsx`
- [FAQ](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Faq/Faq.jsx): `src/sections/Faq/Faq.jsx`
- [Final call to action](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/FinalCta/FinalCta.jsx): `src/sections/FinalCta/FinalCta.jsx`
- [Footer](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/Footer/Footer.jsx): `src/sections/Footer/Footer.jsx`

### Shared presentation

- [Navigation header](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Header.jsx): `src/components/layout/Header.jsx`
- [Card grid](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/sections/CardGridSection.jsx): `src/sections/CardGridSection.jsx`
- [Section layout](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Section.jsx): `src/components/layout/Section.jsx`
- [Container layout](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/layout/Container.jsx): `src/components/layout/Container.jsx`
- [Action link](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/Button.jsx): `src/components/ui/Button.jsx`
- [Scroll reveal](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/Reveal.jsx): `src/components/ui/Reveal.jsx`
- [Reveal observer](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/hooks/useReveal.js): `src/hooks/useReveal.js`
- [Section heading](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/SectionHeader.jsx): `src/components/ui/SectionHeader.jsx`
- [Content card](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/components/ui/Card.jsx): `src/components/ui/Card.jsx`

### Content data

- [Navigation copy](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/navigation.js): `src/data/navigation.js`
- [Hero and metrics copy](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/hero.js): `src/data/hero.js`
- [Section copy](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/sections.js): `src/data/sections.js`
- [CTA and footer copy](https://github.com/mcastillogmez/vetplusfelin-landing/blob/develop/src/data/closing.js): `src/data/closing.js`

### Other components

- **Visitor**

## Connections

- Visitor → Page composition: opens page (evidence: `README.md`)
- Page composition → Navigation header: renders (evidence: `src/App.jsx`)
- Page composition → Hero: renders (evidence: `src/App.jsx`)
- Page composition → Credibility metrics: renders (evidence: `src/App.jsx`)
- Page composition → Problem cards: renders (evidence: `src/App.jsx`)
- Page composition → Benefits cards: renders (evidence: `src/App.jsx`)
- Page composition → Three-step workflow: renders (evidence: `src/App.jsx`)
- Page composition → Service specialties: renders (evidence: `src/App.jsx`)
- Page composition → Testimonials: renders (evidence: `src/App.jsx`)
- Page composition → FAQ: renders (evidence: `src/App.jsx`)
- Page composition → Final call to action: renders (evidence: `src/App.jsx`)
- Page composition → Footer: renders (evidence: `src/App.jsx`)
- Hero → Dashboard visual: renders (evidence: `src/sections/Hero/Hero.jsx`)
- Hero → Hero and metrics copy: reads (evidence: `src/sections/Hero/Hero.jsx`)
- Dashboard visual → Hero and metrics copy: reads (evidence: `src/sections/Hero/DashboardVisual.jsx`)
- Credibility metrics → Hero and metrics copy: reads (evidence: `src/sections/Metrics/Metrics.jsx`)
- Navigation header → Navigation copy: reads (evidence: `src/components/layout/Header.jsx`)
- Navigation header → Action link: renders (evidence: `src/components/layout/Header.jsx`)
- Navigation header → Container layout: uses (evidence: `src/components/layout/Header.jsx`)
- Problem cards → Card grid: uses (evidence: `src/sections/Problems/Problems.jsx`)
- Benefits cards → Card grid: uses (evidence: `src/sections/Benefits/Benefits.jsx`)
- Service specialties → Card grid: uses (evidence: `src/sections/Specialties/Specialties.jsx`)
- Card grid → Section copy: reads (evidence: `src/sections/CardGridSection.jsx`)
- Card grid → Section layout: renders (evidence: `src/sections/CardGridSection.jsx`)
- Card grid → Section heading: renders (evidence: `src/sections/CardGridSection.jsx`)
- Card grid → Content card: renders (evidence: `src/sections/CardGridSection.jsx`)
- Three-step workflow → Section copy: reads (evidence: `src/sections/HowItWorks/HowItWorks.jsx`)
- Testimonials → Section copy: reads (evidence: `src/sections/Testimonials/Testimonials.jsx`)
- FAQ → Section copy: reads (evidence: `src/sections/Faq/Faq.jsx`)
- Final call to action → CTA and footer copy: reads (evidence: `src/sections/FinalCta/FinalCta.jsx`)
- Footer → CTA and footer copy: reads (evidence: `src/sections/Footer/Footer.jsx`)
- Final call to action → Action link: renders (evidence: `src/sections/FinalCta/FinalCta.jsx`)
- Final call to action → Container layout: uses (evidence: `src/sections/FinalCta/FinalCta.jsx`)
- Section layout → Container layout: uses (evidence: `src/components/layout/Section.jsx`)
- Section layout → Scroll reveal: wraps content (evidence: `src/components/layout/Section.jsx`)
- Scroll reveal → Reveal observer: uses (evidence: `src/components/ui/Reveal.jsx`)