Page Components

Page components define the main content area for each page of a trainer’s website. They sit between the Header and Footer and are responsible for the page layout, content display, and user interactions.

Required pages

Every template must include these three pages:

Page	Component	Purpose
Home	`HomeContent`	Landing page — hero section, highlights, call-to-action
About	`AboutContent`	Trainer bio, qualifications, story
Login	`LoginContent`	Authentication form for clients

Optional pages

Include any of these to make your template more comprehensive. Templates with more pages are more attractive to buyers.

Page	Component	Description
Services	`ServicesContent`	List of training services with descriptions and pricing
Blog	`BlogContent`	Blog post listing with cards, pagination
Testimonials	`TestimonialsContent`	Client reviews and success stories
Pricing	`PricingContent`	Pricing tiers and plan comparison
Schedule	`ScheduleContent`	Session booking calendar
Events	`EventsContent`	Upcoming events, workshops, group sessions
Contact	`ContactContent`	Contact form and trainer details
Privacy	`PrivacyContent`	Privacy policy page
Terms	`TermsContent`	Terms of service page
Transformations	`TransformationsContent`	Before/after client transformation gallery
Account	`AccountContent`	Logged-in client’s account dashboard
Join	`JoinContent`	New client registration form
Forgot Password	`ForgotPasswordContent`	Password reset request form
Verify Email	`VerifyEmailContent`	Email verification status page
Reset Password	`ResetPasswordContent`	New password entry form

Export pattern

All page components use default exports:


export default function HomeContent() {
  const { clientName, t, localePath } = useApp()
 
  return (
    <main>
      <h1>{t('welcomeTo')} {clientName}</h1>
      {/* page content */}
    </main>
  )
}

Then re-export from your barrel file (index.ts):


export { default as HomeContent } from './pages/home/HomeContent'

Page builder integration

If your template supports the page builder, page components can export a RenderBuilderSection named export alongside the default export:


import styles from './HomeContent.module.css'
import { useApp } from '@/hooks/useApp'
 
interface BuilderSection {
  id: string
  type: string
  content: Record<string, unknown>
}
 
export function RenderBuilderSection({ section }: { section: BuilderSection }) {
  switch (section.type) {
    case 'hero':
      return <section className={styles.hero}>{/* render hero */}</section>
    case 'features':
      return <section className={styles.features}>{/* render features */}</section>
    case 'cta':
      return <section className={styles.cta}>{/* render CTA */}</section>
    default:
      return null
  }
}
 
export default function HomeContent() {
  const { t } = useApp()
  return <main>{/* default layout */}</main>
}

RenderBuilderSection is optional. It enables trainers to customise their page layout using the Gymlium drag-and-drop page builder. If you don’t export it, the trainer sees only your default layout.

Available props and hooks

Page components receive no props directly. Instead, use the provided hooks to access all the data you need:

useApp()


const {
  locale,          // Current locale code (e.g. "en", "ar")
  isRtl,           // Whether current locale is RTL
  t,               // Translation function: t('key')
  localePath,      // Locale-prefixed path: localePath('/about')
  clientName,      // Trainer's business name
  locales,         // Array of enabled locale codes
  plan,            // Trainer's subscription plan
  planLimits,      // Feature limits for the plan
  stats,           // Site statistics (post count, etc.)
  registrationOpen // Whether client registration is enabled
} = useApp()

See Hooks & Context for full documentation of each hook’s return values.

File organisation

Each page lives in its own directory under pages/:


pages/
├── home/
│   ├── HomeContent.tsx
│   ├── HomeContent.module.css
│   └── components/           # Optional sub-components
│       ├── HeroSection.tsx
│       └── HeroSection.module.css
├── about/
│   ├── AboutContent.tsx
│   └── AboutContent.module.css
└── services/
    ├── ServicesContent.tsx
    └── ServicesContent.module.css

You can create sub-components within a page directory. Only the main *Content.tsx file needs to be exported from the barrel file — sub-components are imported internally by the page component.