Fitness Sports Center

A premium, multi-page React application conceptualized for an elite gym and fitness facility. Built with Vite for blazing fast performance, it features a highly dynamic, user-centric interface across multiple landing pages representing fitness plans, services, and pricing models.

🌐 Live Demo

[https://gym-promo-website.vercel.app/]

Local Dev Server: [http://localhost:5173]

🛠 Tech Stack

• Framework: React 18
• Routing: React Router DOM (v6.15+)
• Build Tool: Vite
• Styling: Vanilla CSS with dynamic CSS variables, Flexbox/Grid patterns
• Tooling: TypeScript (strict settings) with standard JS/JSX

✨ Key Features

• Multi-Page Architecture: /personal-training, /group-classes, /modern-equipment, /cardio-health, /pricing.
• Dark/Light Mode: Global toggle via navigation bar.
• Integrated Program Search: Real-time filtering with scroll-to results.
• Intersection Observer Animations: useInView custom hooks for elegant fade-up animations.
• Simulated API Form Handling: Contact form with validation, loading states, and fetch to mock API (jsonplaceholder).
• Anchor Smooth Scrolling: Seamless navigation to internal anchors.

⚙️ Setup Instructions

1. Prerequisites

Ensure Node.js is installed (includes NPM).

2. Installation

git clone https://github.com/your user name/gym-promo-website
cd gym-promo-website
npm install

3. Run Locally

npm run dev

Visit http://localhost:5173 in your browser.

4. Build for Production

npm run build
npm run preview

• Production build will be in /dist.

🧩 NPM Scripts

• npm run dev – Runs Vite dev server with HMR
• npm run build – Production build in /dist
• npm run preview – Preview production build locally

🤝 Contributing

Issues, features, and pull requests are welcome. Feel free to contribute!