Démarrage rapide

Construis ta première page ePassLive — une carte d'événement Storefront — en dix minutes.

Objectif

Affiche une carte d'événement entièrement accessible avec la barre supérieure et le pied de page ePassLive, en utilisant le gabarit StorefrontShell.

Étape 1 — Crée la route

mkdir -p app/events/[slug]
touch app/events/[slug]/page.tsx

Étape 2 — Utilise le gabarit shell

import { StorefrontShell, EventCard } from '@epasslive/design-system'
import type { ReactElement } from 'react'

export default function EventPage({
  params,
}: {
  params: { slug: string }
}): ReactElement {
  return (
    <StorefrontShell
      skipTargetId="storefront-main"
      skipLabel={locale === 'fr' ? 'Aller au contenu principal' : 'Skip to main content'}
      topNav={<SiteHeader />}
      main={
        <EventCard
          id="evt-aurora-2026"
          title="Aurora Sound Festival 2026"
          image={{
            url: '/events/aurora-hero.jpg',
            alt: 'Aurora Sound Festival main stage at dusk',
          }}
          date={{ day: '12', month: 'AUG', year: '2026', iso: '2026-08-12T19:00' }}
          venue={{ name: 'Brooklyn Mirage', city: 'Brooklyn' }}
          priceFrom={89}
          currency="CAD"
          href={`/events/${params.slug}`}
        />
      }
      footer={<SiteFooter />}
    />
  )
}

Étape 3 — Lance le serveur de dev

pnpm dev
# → http://localhost:3000/events/aurora-2026

Astuce

Chaque composant de cette bibliothèque peut être copié-collé depuis les pages du catalogue et utilisé comme Server Component. Ajoute uniquement "use client" quand le composant utilise de l'interactivité (état, refs, effets).