Body Fit Gym — Marketing Website

A modern, high-converting single-page website for Body Fit Gym, Lucknow. Built with Next.js 14 (App Router) and Tailwind CSS, fully responsive, mobile-first, ready to deploy on Vercel in one click.

✨ Sections

1. Hero — bold headline, ratings, primary CTA + call button
2. Trust Bar — 4.5★ · 1000+ reviews · 7+ years
3. About — story + image
4. Services — 6-tile grid with custom icons
5. Testimonials — Google-style review cards
6. Location — embedded Google Map + address card
7. Contact/CTA — phone, WhatsApp, contact form (opens WhatsApp)
8. Footer — contact, social, navigation
9. Floating WhatsApp — sticky button on every screen

🎨 Design

• Dark, energetic palette (charcoal #070708 + flame accent #FF4D00)
• Custom display font (Space Grotesk) + body font (Inter)
• Subtle scroll-reveal animations, respects prefers-reduced-motion
• Accessible, semantic HTML, keyboard-friendly mobile nav

🛠 Tech

• Next.js 14 (App Router, TypeScript)
• Tailwind CSS with custom theme
• Inline SVG icon set (no icon library)
• Google Maps embedded via iframe
• tel: and wa.me deep links for the phone / WhatsApp buttons
• Contact form opens WhatsApp with the user's message pre-filled

🚀 Local development

npm install
npm run dev

Open http://localhost:3000.

📦 Production build

npm run build
npm run start

☁️ Deploy on Vercel

1. Push this folder to a Git repo (GitHub/GitLab/Bitbucket).
2. Go to vercel.com/new and import the repo.
3. Vercel auto-detects Next.js — no env vars needed.
4. Click Deploy. Done.

Or use the Vercel CLI:

npm i -g vercel
vercel

📁 Project structure

app/
  layout.tsx        # root layout, fonts, metadata, SEO
  page.tsx          # single-page composition
  globals.css       # tailwind + custom utilities
components/
  Navbar.tsx
  Hero.tsx
  TrustBar.tsx
  About.tsx
  Services.tsx
  Testimonials.tsx
  Location.tsx
  Contact.tsx
  Footer.tsx
  FloatingWhatsApp.tsx
  Reveal.tsx        # scroll reveal helper (IntersectionObserver)
  Icons.tsx         # inline SVG icon set
lib/
  business.ts       # all business info (phone, address, links)

📝 Editing content

All business details (phone, address, rating, etc.) live in lib/business.ts. Update once and the entire site reflects the change.

📞 Phone & WhatsApp links

• Phone: tel:+918756100444
• WhatsApp: https://wa.me/918756100444 (with prefilled text for the CTA)

📷 Images

All imagery is loaded from Unsplash via images.unsplash.com URLs, which are allowed in next.config.mjs. Swap them for real gym photos by replacing the URLs in the components.