Overview

AJM FIT — Personal Training Website

A premium personal training website for AJMFit (ISSA Certified Personal Trainer). Built with Next.js 14, TypeScript, and Tailwind CSS 3 with Framer Motion animations. Deployed at ajmfit.com.

What It Is

A fully custom personal training website featuring a bold, high-energy design with custom dumbbell cursor, grain texture overlays, and cinematic hero video. The site serves as a lead generation funnel from landing page to application form.

Key Metrics

  • 5 Pages — Home, About, Programs, Newsletter, Apply
  • Beehiiv Integration — "Brains & Gains" newsletter
  • Framer Motion — Smooth page transitions & scroll animations
  • Deployed — ajmfit.com via Vercel

Tech Stack

Next.js 14 TypeScript Tailwind CSS 3 Framer Motion Beehiiv React Hook Form + Zod

User Flow

HomeHero video + CTA
→
AboutTrainer credentials
→
ProgramsPricing toggle
→
ApplyForm + Zod validation
Visual Identity

Design System

A carefully crafted design language featuring Barlow + Barlow Condensed fonts, a navy/blue/orange brand palette, and distinctive visual treatments including a custom dumbbell cursor and grain texture overlay.

Brand Colors

Navy
#1B2D50
Blue
#2E6AB0
Orange
#F08B1E

Typography

Font Usage
Barlow CondensedHeadlines, hero text, section titles — all-caps, bold
BarlowBody text, paragraphs, UI elements — clean sans-serif

Both loaded via Google Fonts. Barlow Condensed creates the strong, athletic feel.

Signature Effects

  • Dumbbell cursor — Custom SVG cursor replacing default pointer sitewide
  • Grain overlay — Subtle noise texture on backgrounds for tactile depth
  • Scroll reveals — Framer Motion whileInView animations on all sections
  • Gradient accents — Orange-to-blue gradients on CTAs and highlights
💡
Design tokens are defined in tailwind.config.ts under the theme.extend section. All brand colors, fonts, and spacing are centralized there for consistency.
Pages

Pages Tour

Five pages that form a funnel — from awareness (Home) to conversion (Apply). Each page is purpose-built for its role in the journey.

Home (/) — The Hook

  • Hero section — Full-width background video with sound toggle button
  • CTA overlay — Bold headline + "Start Your Journey" button
  • Social proof — Client testimonials and transformation stats
  • Scroll reveal — Sections animate in on viewport entry via Framer Motion

About (/about) — The Credibility

  • Trainer photo with parallax effect
  • ISSA Certification badge
  • Dumbbell-styled bullet points for bio highlights
  • Training philosophy section

Programs (/work-with-me) — The Offer

  • Monthly/yearly pricing toggle (animated)
  • Tiered program cards with feature lists
  • Highlight "most popular" tier
  • "Apply Now" CTA links to application form

Newsletter (/newsletter) — The Nurture

  • "Brains & Gains" branded newsletter signup
  • Beehiiv embed/API integration
  • Email input + subscribe button
  • Social proof: subscriber count badge

Apply (/apply) — The Conversion

  • Multi-field application form
  • React Hook Form for state management
  • Zod schema validation (client-side)
  • Success confirmation with next steps
✅
Funnel logic: Every page has a primary CTA that pushes visitors toward the Apply page. Home → Programs → Apply is the primary conversion path.
Integration

Newsletter Integration

Beehiiv powers the "Brains & Gains" newsletter. Free tier (2,500 subscribers, unlimited sends). API integration for seamless subscribe flow.

How It Works

User enters email/newsletter page
→
/api/newsletterNext.js API route
→
Beehiiv V2 APISubscriptions endpoint
→
SubscribedConfirmation shown

Configuration

Environment Variables (Vercel)
BEEHIIV_API_KEYAPI key from Beehiiv dashboard
BEEHIIV_PUBLICATION_IDMust include pub_ prefix (pub_eaa49601-...)
⚠️
Free tier limitations: No Send API, no post creation via API, no automation creation via API (all Enterprise-only). Email content and automations must be created in the Beehiiv dashboard directly.
💡
Pending: Create a welcome email automation in the Beehiiv dashboard so new subscribers get an immediate onboarding sequence.
Technical

Architecture

A standard Next.js 14 App Router project with TypeScript, Tailwind CSS 3, and Framer Motion. Deployed on Vercel with environment variables for Beehiiv.

Project Structure

Key Directories & Files
app/Next.js App Router pages — layout.tsx, page.tsx, and route directories
app/work-with-me/Programs page with pricing toggle component
app/newsletter/Newsletter signup page
app/apply/Application form with React Hook Form + Zod
app/api/newsletter/API route proxying to Beehiiv V2 subscriptions
components/Shared UI components (navbar, footer, buttons, animations)
assets/Images, video files, custom cursor SVGs
tailwind.config.tsBrand tokens — colors (#1B2D50, #2E6AB0, #F08B1E), fonts (Barlow)

Deployment

Platform: Vercel

Domain: ajmfit.com

Build: next build (automatic on push)

Env Vars:

  • BEEHIIV_API_KEY
  • BEEHIIV_PUBLICATION_ID

Key Dependencies

next ^14 react ^18 tailwindcss ^3 framer-motion react-hook-form zod
🎉
Walkthrough complete! This covers the design system, all 5 pages, the Beehiiv newsletter integration, and the project architecture. Refer back anytime.