# sararydavid/infinite-sports-club architecture

> Architecture diagram of the GitHub repository sararydavid/infinite-sports-club, 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/sararydavid/infinite-sports-club
- Repository: https://github.com/sararydavid/infinite-sports-club

## Overview

Infinite Sports Club is a React marketing site for a fitness club. Visitors land on the hero, explore the club, facility, coaches, and membership options, then use section links to reach membership or contact information. Gallery browsing and membership billing selection are local UI interactions. The sampled contact form maintains local state; its later submission behavior is not established by the excerpt. The README is empty, so capabilities are based on the component tree and sampled source.

Main entry points: [`src/App.jsx`](https://github.com/sararydavid/infinite-sports-club/blob/main/src/App.jsx) (Page composition), [`src/components/Gallery.jsx`](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Gallery.jsx) (Facility gallery), [`src/main.jsx`](https://github.com/sararydavid/infinite-sports-club/blob/main/src/main.jsx) (React mount), [`src/components/Trainers.jsx`](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Trainers.jsx) (Coach profiles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Site Navigation"]
  node_app["Page composition<br/>[App.jsx]"]
  node_entry["React mount<br/>[main.jsx]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
end

subgraph group_club["Club Overview"]
  node_hero["Landing hero<br/>[Hero.jsx]"]
  node_about["Club introduction<br/>[About.jsx]"]
  node_trainers["Coach profiles<br/>[Trainers.jsx]"]
  node_gallery["Facility gallery<br/>[Gallery.jsx]"]
end

subgraph group_engagement["Visitor Engagement"]
  node_membership["Membership plans<br/>[Membership.jsx]"]
  node_cta["Promotional callout<br/>[CTA.jsx]"]
  node_contact["Contact and inquiry<br/>[Contact.jsx]"]
  node_footer["Footer links<br/>[Footer.jsx]"]
end

node_visitor(("Site visitor"))
node_image_host["Unsplash images"]

node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_membership
node_app -->|"renders"| node_trainers
node_app -->|"renders"| node_gallery
node_app -->|"renders"| node_cta
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_visitor -->|"uses navigation"| node_navbar
node_visitor -->|"selects billing"| node_membership
node_visitor -->|"opens lightbox"| node_gallery
node_visitor -->|"edits inquiry"| node_contact
node_trainers -.->|"loads portraits"| node_image_host
node_gallery -.->|"loads facility images"| node_image_host

click node_app "https://github.com/sararydavid/infinite-sports-club/blob/main/src/App.jsx"
click node_entry "https://github.com/sararydavid/infinite-sports-club/blob/main/src/main.jsx"
click node_navbar "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/About.jsx"
click node_trainers "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Trainers.jsx"
click node_gallery "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Gallery.jsx"
click node_membership "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Membership.jsx"
click node_cta "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/CTA.jsx"
click node_contact "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Footer.jsx"

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,node_entry,node_navbar toneBlue
class node_hero,node_about,node_trainers,node_gallery toneAmber
class node_membership,node_cta,node_contact,node_footer toneMint
class node_visitor,node_image_host toneIndigo
```

## Components

### Site Navigation

- [Page composition](https://github.com/sararydavid/infinite-sports-club/blob/main/src/App.jsx): `src/App.jsx`
- [React mount](https://github.com/sararydavid/infinite-sports-club/blob/main/src/main.jsx): `src/main.jsx`
- [Navigation bar](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Club Overview

- [Landing hero](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Club introduction](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Coach profiles](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Trainers.jsx): `src/components/Trainers.jsx`
- [Facility gallery](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Gallery.jsx): `src/components/Gallery.jsx`

### Visitor Engagement

- [Membership plans](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Membership.jsx): `src/components/Membership.jsx`
- [Promotional callout](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/CTA.jsx): `src/components/CTA.jsx`
- [Contact and inquiry](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Footer links](https://github.com/sararydavid/infinite-sports-club/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Other components

- **Site visitor**
- **Unsplash images**

## Connections

- Site visitor → React mount: opens site
- React mount → Page composition: mounts
- Page composition → Navigation bar: renders
- Page composition → Landing hero: renders
- Page composition → Club introduction: renders
- Page composition → Membership plans: renders
- Page composition → Coach profiles: renders
- Page composition → Facility gallery: renders
- Page composition → Promotional callout: renders
- Page composition → Contact and inquiry: renders
- Page composition → Footer links: renders
- Site visitor → Navigation bar: uses navigation
- Site visitor → Membership plans: selects billing
- Site visitor → Facility gallery: opens lightbox
- Site visitor → Contact and inquiry: edits inquiry
- Coach profiles → Unsplash images: loads portraits
- Facility gallery → Unsplash images: loads facility images