Explore

Discovery page for clients to find trainers, programs, and challenges. Features search, category filters, horizontal carousels, and trainer cards. Client-only route.

Route Information

Route: /explore

File: src/routes/_authed/_onboarded/_client/explore.tsx

Layout: _authed/_onboarded/_client (client-only)

Max Width: max-w-6xl

Breadcrumb: Explore

Explore Page

Explore — Full Page

Explore

Discover trainers, programs, and challenges.

Featured Programs

Weight Loss

Shred 90

Sarah Chen

12 weeks Intermediate
4.9 $49
Strength

Strength Foundations

Marcus Johnson

8 weeks Beginner
4.8 $29
Flexibility

Yoga Flow 30

Priya Patel

4 weeks All Levels
5.0 Free

Top Trainers

SC

Sarah Chen

Weight Loss HIIT
4.9 24 clients
MJ

Marcus Johnson

Strength Sports
4.8 18 clients
PP

Priya Patel

Yoga Flexibility
5.0 31 clients

Component Inventory

Component Source Usage
Input@/components/ui/inputSearch bar with icon
Button@/components/ui/buttonCategory filter pills, View Profile
Card@/components/ui/cardProgram cards, trainer cards
Avatar@/components/ui/avatarTrainer avatars with fallback initials
Badge@/components/ui/badgeDuration, difficulty, specialty badges
ScrollArea + ScrollBar@/components/ui/scroll-areaHorizontal carousel for featured programs

Data Requirements

Currently using mock data from src/mocks/programs.ts and src/mocks/trainers.ts. Will be replaced with real queries.

State Management

  • selectedCategory — local state for category filter (default: "All")
  • searchQuery — local state for search input
  • Filtering done client-side on mock data

Responsive Behavior

Desktop

3-column trainer grid. Horizontal scroll carousel for programs. Category pills wrap naturally.

Tablet

2-column trainer grid. Program carousel same behavior. Categories may wrap to second row.

Mobile

Single column trainers. Program cards 280px wide in carousel. Categories wrap to multiple rows.