Profile

Profile view and edit page. Renders TrainerProfileView or ClientProfileView based on the active role. Uses max-w-4xl layout for detail/form pages.

Route Information

Route: /profile

File: src/routes/_authed/_onboarded/profile.tsx

Layout: _authed/_onboarded (with sidebar + header)

Max Width: max-w-4xl

Breadcrumb: Profile

Trainer Profile View

Public-facing trainer profile with avatar, bio, specialties, pricing, rating, review count, verification badge, and intro video.

Trainer Profile — View Mode

Profile

View and edit your profile information.

SC

Sarah Chen

Verified

Certified NASM trainer with 8 years experience specializing in weight loss and HIIT training.

Weight Loss HIIT Strength Cardio
4.9 (127 reviews) 24 clients San Francisco, CA

Pricing

Online Training

$149/mo

In-Person

$85/session

Monthly Coaching

$299/mo

Credentials

NASM-CPT

Certified Personal Trainer

BSc Kinesiology

UC Berkeley, 2015

Client Profile View

Client Profile — View Mode
AW

Alex Williams

Intermediate fitness enthusiast looking to build strength and improve endurance.

Goals

Muscle Building Strength Endurance

Preferences

Hybrid training 4x per week $100-200/mo budget

Component Inventory

Component Source Usage
TrainerProfileView@/components/profile/trainer-profile-viewFull trainer profile card
ClientProfileView@/components/profile/client-profile-viewClient profile with goals
Avatar@/components/ui/avatarUser avatar with fallback initials
Badge@/components/ui/badgeSpecialties, goals, verified badge
Card@/components/ui/cardProfile, pricing, credentials sections

Data Requirements

Queries

  • useTrainerProfile() — trainer profile data
  • useClientProfile() — client profile data
  • useActiveRole() — determines which view to render

Hooks

  • useSetBreadcrumbs([{ label: 'Profile' }])
  • useActiveRole() from @/hooks/use-profiles

Responsive Behavior

Desktop (1024px+)

Horizontal layout: avatar left, info center, edit button right. 3-column pricing grid. 2-column credentials.

Tablet (768px)

Same horizontal layout via sm:flex-row. Pricing may wrap to 2 columns.

Mobile (<640px)

Vertical stack: avatar on top, info below, edit button below info. Pricing single column. Credentials single column.