How mcastillogmez/vetplusfelin-landing works
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: App.jsx Page composition · CardGridSection.jsx Card grid · FinalCta.jsx Final call to action · Header.jsx Navigation header
Components 26
Page composition
- Page composition
src/App.jsx
Landing sections
- Hero
src/sections/Hero/Hero.jsx - Dashboard visual
src/sections/Hero/DashboardVisual.jsx - Credibility metrics
src/sections/Metrics/Metrics.jsx - Problem cards
src/sections/Problems/Problems.jsx - Benefits cards
src/sections/Benefits/Benefits.jsx - Three-step workflow
src/sections/HowItWorks/HowItWorks.jsx - Service specialties
src/sections/Specialties/Specialties.jsx - Testimonials
src/sections/Testimonials/Testimonials.jsx - FAQ
src/sections/Faq/Faq.jsx - Final call to action
src/sections/FinalCta/FinalCta.jsx - Footer
src/sections/Footer/Footer.jsx
Shared presentation
- Navigation header
src/components/layout/Header.jsx - Card grid
src/sections/CardGridSection.jsx - Section layout
src/components/layout/Section.jsx - Container layout
src/components/layout/Container.jsx - Action link
src/components/ui/Button.jsx - Scroll reveal
src/components/ui/Reveal.jsx - Reveal observer
src/hooks/useReveal.js - Section heading
src/components/ui/SectionHeader.jsx - Content card
src/components/ui/Card.jsx
Content data
- Navigation copy
src/data/navigation.js - Hero and metrics copy
src/data/hero.js - Section copy
src/data/sections.js - CTA and footer copy
src/data/closing.js
Other components
- Visitor
Connections 36
- Visitor → Page composition: opens page
README.md - Page composition → Navigation header: renders
src/App.jsx - Page composition → Hero: renders
src/App.jsx - Page composition → Credibility metrics: renders
src/App.jsx - Page composition → Problem cards: renders
src/App.jsx - Page composition → Benefits cards: renders
src/App.jsx - Page composition → Three-step workflow: renders
src/App.jsx - Page composition → Service specialties: renders
src/App.jsx - Page composition → Testimonials: renders
src/App.jsx - Page composition → FAQ: renders
src/App.jsx - Page composition → Final call to action: renders
src/App.jsx - Page composition → Footer: renders
src/App.jsx - Hero → Dashboard visual: renders
src/sections/Hero/Hero.jsx - Hero → Hero and metrics copy: reads
src/sections/Hero/Hero.jsx - Dashboard visual → Hero and metrics copy: reads
src/sections/Hero/DashboardVisual.jsx - Credibility metrics → Hero and metrics copy: reads
src/sections/Metrics/Metrics.jsx - Navigation header → Navigation copy: reads
src/components/layout/Header.jsx - Navigation header → Action link: renders
src/components/layout/Header.jsx - Navigation header → Container layout: uses
src/components/layout/Header.jsx - Problem cards → Card grid: uses
src/sections/Problems/Problems.jsx - Benefits cards → Card grid: uses
src/sections/Benefits/Benefits.jsx - Service specialties → Card grid: uses
src/sections/Specialties/Specialties.jsx - Card grid → Section copy: reads
src/sections/CardGridSection.jsx - Card grid → Section layout: renders
src/sections/CardGridSection.jsx - Card grid → Section heading: renders
src/sections/CardGridSection.jsx - Card grid → Content card: renders
src/sections/CardGridSection.jsx - Three-step workflow → Section copy: reads
src/sections/HowItWorks/HowItWorks.jsx - Testimonials → Section copy: reads
src/sections/Testimonials/Testimonials.jsx - FAQ → Section copy: reads
src/sections/Faq/Faq.jsx - Final call to action → CTA and footer copy: reads
src/sections/FinalCta/FinalCta.jsx - Footer → CTA and footer copy: reads
src/sections/Footer/Footer.jsx - Final call to action → Action link: renders
src/sections/FinalCta/FinalCta.jsx - Final call to action → Container layout: uses
src/sections/FinalCta/FinalCta.jsx - Section layout → Container layout: uses
src/components/layout/Section.jsx - Section layout → Scroll reveal: wraps content
src/components/layout/Section.jsx - Scroll reveal → Reveal observer: uses
src/components/ui/Reveal.jsx