# Day 68 — Personal Trainer Template

**Stack:** Astro · Tailwind CSS · Syne (display) · Lexend (body)  
**Demo:** [templates.allanninal.dev/personal-trainer/](https://templates.allanninal.dev/personal-trainer/)  
**Part of:** [365 Templates](https://allanninal.dev) — one free Astro template per day for a year.

---

## What this template is

A **personal-brand landing page for a solo personal trainer** — one person, not a facility. Designed for the certified independent trainer who does 1:1 sessions, small-group training, and/or online coaching.

**Palette: Violet Power (light-default)**  
Near-White `#FAFAFA` · Violet `#7C3AED` · Deep Purple-Black `#0F0A1E`  
Completely distinct from all prior Sprint 3 fitness templates (Carbon Black/Orange, Steel Night/Volt, Ring Mat/Red, Warm Linen/Sage, Cool Stone/Slate, Deep Stage Ink/Rose, Chalk/Summit Forest, Iron Night/Blue).

**Fonts (both first use in 365 library):**  
- Display: Syne — geometric sans with personality, modern personal brand feel  
- Body: Lexend — reader-optimized humanist sans, high clarity at all sizes

**Persona:** Alex Rivera, NSCA-CSCS certified personal trainer in Austin TX. Specializes in body composition + athletic performance for busy professionals.

---

## Sections

| Section | ID | Notes |
|---|---|---|
| Hero | — | Dark purple-black with kinetic violet geometry |
| Stats band | — | Accent-bg (violet) |
| About / Bio | `#about` | Avatar initials, cert chips, two-column layout |
| Services | `#services` | 1:1, Small-Group, Online — 3-card grid |
| **The Method** | `#method` | **Unique section** — 3-phase Assess → Program → Transform |
| **Client Results** | `#results` | **Unique section** — transformation metric cards with stats |
| Pricing | `#pricing` | 3 tiers, featured card highlighted |
| Free Consult CTA | — | Dark section with consult call to action |
| Testimonials | `#testimonials` | 4 client testimonials |
| FAQ | `#faq` | 8 questions, sidebar layout |
| Contact | `#contact` | LinkedIn primary, email secondary, Formspree form |
| Final CTA | — | Violet accent band |

---

## Getting started

```bash
git clone https://github.com/allanninal/templates
cd templates/templates/personal-trainer
npm install
cp .env.example .env
npm run dev
```

Open [http://localhost:4321/personal-trainer/](http://localhost:4321/personal-trainer/) in your browser.

### Customise

1. **`src/data/config.ts`** — trainer name, phone, email, city, certifications, social links, booking URL.
2. **`src/pages/index.astro`** — update the services, method phases, client results, pricing, testimonials, and FAQs with your real data.
3. **`src/styles/global.css`** — adjust the color tokens in `:root` if you want a different accent color.
4. **`public/og-image.svg`** → export to `og-image.png` (1200×630) for social sharing.
5. **`public/favicon.svg`** — replace with your own logo SVG.

---

## Environment variables

| Variable | Required | Purpose |
|---|---|---|
| `PUBLIC_SITE_URL` | No | Canonical site URL. Defaults to `https://templates.allanninal.dev`. |
| `PUBLIC_BASE_PATH` | No | Deployment subdirectory. Defaults to `/personal-trainer/`. |
| `PUBLIC_TEMPLATE_HUB_URL` | No | Hub URL — enables the download bar + analytics. Leave blank for cloning users. |
| `PUBLIC_EDITION` | No | Set to `pro` to enable Pro edition features. |
| `PUBLIC_SHOP_URL` | No | Shop URL for Pro purchase links. |

---

## Scripts

```bash
npm run dev          # dev server at localhost:4321
npm run build        # production build → dist/
npm run preview      # preview dist/ locally
npm run test         # full Playwright suite (a11y + links)
npm run test:a11y    # axe-core WCAG AA audit only
npm run test:links   # link integrity + structure checks
npm run test:lighthouse  # Lighthouse CI (≥95 all categories)
```

---

## License

MIT — free to use, modify, and deploy. Attribution appreciated but not required.

Template by [Allan Ninal](https://allanninal.dev). Day 68 of 365.
