Documentation

1. Overview

2. Project structure

src/app/
├── page.tsx                  // homepage — assembles every section
├── layout.tsx                // fonts (Inter + Oswald) and CSS scope
├── iron.css                  // color variables, scoped under .iron-scope
├── classes/[slug]/page.tsx   // class detail page
├── trainers/[slug]/page.tsx  // trainer detail page
├── _components/
│   ├── layout/                Navbar.tsx, Footer.tsx
│   ├── sections/               Hero, About, Classes, Schedule,
│   │                           Trainers, Gallery, Testimonials,
│   │                           Pricing, FAQ, Marquee
│   └── ui/ScrollReveal.tsx    // scroll-in animation wrapper
└── _data/mockData.ts         // all text content + class/trainer data

The _components and _data folders use a leading underscore so Next.js never treats them as routes — only page.tsx files are routable.

3. Editing content

Everything — nav links, classes, trainers, schedule, gallery, testimonials, pricing plans, FAQs — lives in one file: _data/mockData.ts.

export const classesData = [
  {
    slug: "powerlifting",        // becomes the URL: /classes/powerlifting
    title: "Powerlifting",
    description: "Build raw strength with heavy compound movements.",
    longDescription: "...",      // shown on the detail page
    trainer: "Mark Titan",
    trainerSlug: "mark-titan",   // links to /trainers/mark-titan
  },
];

4. Styling

Colors are CSS variables defined in iron.css, scoped under the .iron-scope wrapper so they never leak outside this template:

To rebrand, edit the :root-style variables at the top of iron.css — every component reads color through var(--accent) etc., so one edit updates the whole site. Headings use Oswald, body text uses Inter — both loaded in layout.tsx via next/font/google.

5. Replacing images

Photography lives in public/: a hero background, an about-section photo, three trainer portraits and six gallery shots. Swap any file keeping the same name, or update the path in _data/mockData.ts (trainers, gallery) or directly in Hero.tsx / About.tsx (hero and about images).

6. Schedule & booking

Open _components/sections/Schedule.tsx and connect the booking handler to your own backend, a form service like Formspree, or a calendar/CRM API before going live.