feat: add PageHeader component and centralize page spacing

- Create reusable PageHeader component (emoji + title + subtitle + actions)
- Use PageHeader in sessions, teams, users, objectives pages
- Centralize vertical padding in layout (py-6) and remove per-page py-* values

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/gif-mood/[id]/page.tsx

@@ -29,7 +29,7 @@ export default async function GifMoodSessionPage({ params }: GifMoodSessionPageP
   const userTeams = await getUserTeams(authSession.user.id);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">

src/app/gif-mood/new/page.tsx

@@ -20,7 +20,8 @@ export default function NewGifMoodPage() {
   const [error, setError] = useState<string | null>(null);
   const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
   const [title, setTitle] = useState(
-    () => `GIF Mood - ${new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
+    () =>
+      `GIF Mood - ${new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
   );
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -48,11 +49,11 @@ export default function NewGifMoodPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            <span>🎭</span>
+            <span>🎞️</span>
             Nouveau GIF Mood Board
           </CardTitle>
           <CardDescription>

src/app/layout.tsx

@@ -46,7 +46,9 @@ export default function RootLayout({
         <Providers>
           <div className="min-h-screen bg-background">
             <Header />
-            {children}
+            <div className="py-6">
+              {children}
+            </div>
           </div>
         </Providers>
       </body>

src/app/motivators/[id]/page.tsx

@@ -31,7 +31,7 @@ export default async function MotivatorSessionPage({ params }: MotivatorSessionP
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">

src/app/motivators/new/page.tsx

@@ -46,7 +46,7 @@ export default function NewMotivatorSessionPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">

src/app/objectives/page.tsx

@@ -2,7 +2,7 @@ import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import Link from 'next/link';
 import { getUserOKRs } from '@/services/okrs';
-import { Card } from '@/components/ui';
+import { Card, PageHeader } from '@/components/ui';
 import { ObjectivesList } from '@/components/okrs/ObjectivesList';
 import { comparePeriods } from '@/lib/okr-utils';
 
@@ -31,17 +31,12 @@ export default async function ObjectivesPage() {
   const periods = Object.keys(okrsByPeriod).sort(comparePeriods);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
-      {/* Header */}
+      <PageHeader
-      <div className="mb-8">
+        emoji="🎯"
-        <h1 className="text-3xl font-bold text-foreground flex items-center gap-2">
+        title="Mes Objectifs"
-          <span className="text-3xl">🎯</span>
+        subtitle="Suivez la progression de vos OKRs à travers toutes vos équipes"
-          Mes Objectifs
+      />
-        </h1>
-        <p className="mt-2 text-muted">
-          Suivez la progression de vos OKRs à travers toutes vos équipes
-        </p>
-      </div>
 
       {okrs.length === 0 ? (
         <Card className="p-12 text-center">

src/app/page.tsx

@@ -4,7 +4,7 @@ import { WORKSHOPS, getSessionsTabUrl } from '@/lib/workshops';
 export default function Home() {
   return (
     <>
-      <main className="mx-auto max-w-7xl px-4 py-12">
+      <main className="mx-auto max-w-7xl px-4">
         {/* Hero Section */}
         <section className="mb-16 text-center">
           <h1 className="mb-4 text-5xl font-bold text-foreground">

src/app/profile/page.tsx

@@ -19,18 +19,19 @@ export default async function ProfilePage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
-      <div className="mb-8 flex items-center gap-6">
+      <div className="mb-8 flex items-center gap-5">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={getGravatarUrl(user.email, 160)}
           alt={user.name || user.email}
-          width={80}
+          width={72}
-          height={80}
+          height={72}
-          className="rounded-full border-2 border-border"
+          className="rounded-full border-2 border-border shrink-0"
         />
         <div>
-          <h1 className="text-3xl font-bold text-foreground">Mon Profil</h1>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground">Mon Profil</h1>
-          <p className="mt-1 text-muted">Gérez vos informations personnelles</p>
+          <p className="mt-1.5 text-sm text-muted">Gérez vos informations personnelles</p>
         </div>
       </div>
 

src/app/sessions/[id]/page.tsx

@@ -31,7 +31,7 @@ export default async function SessionPage({ params }: SessionPageProps) {
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">

src/app/sessions/new/page.tsx

@@ -56,7 +56,7 @@ export default function NewSessionPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">

src/app/sessions/page.tsx

@@ -24,7 +24,7 @@ import {
   getGifMoodSessionsByUserId,
   getTeamCollaboratorSessionsForAdmin as getTeamGifMoodSessions,
 } from '@/services/gif-mood';
-import { Card } from '@/components/ui';
+import { Card, PageHeader } from '@/components/ui';
 import { withWorkshopType } from '@/lib/workshops';
 import { WorkshopTabs } from './WorkshopTabs';
 import { NewWorkshopDropdown } from './NewWorkshopDropdown';
@@ -113,22 +113,17 @@ export default async function SessionsPage() {
   const totalCount = allSessions.length;
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8 sm:py-12">
+    <main className="mx-auto max-w-7xl px-4">
-      {/* Header */}
+      <PageHeader
-      <div className="mb-10 flex flex-col sm:flex-row sm:items-end justify-between gap-6">
+        emoji="🗂️"
-        <div>
+        title="Mes Ateliers"
-          <div className="flex items-center gap-3 mb-1.5">
+        subtitle={
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">Mes Ateliers</h1>
+          totalCount > 0
-            {totalCount > 0 && (
+            ? `${totalCount} atelier${totalCount > 1 ? 's' : ''} · Tous vos ateliers en un seul endroit`
-              <span className="inline-flex items-center justify-center px-2.5 h-6 rounded-full bg-primary/10 text-primary text-sm font-semibold">
+            : 'Tous vos ateliers en un seul endroit'
-                {totalCount}
+        }
-              </span>
+        actions={<NewWorkshopDropdown />}
-            )}
+      />
-          </div>
-          <p className="text-sm text-muted">Tous vos ateliers en un seul endroit</p>
-        </div>
-        <NewWorkshopDropdown />
-      </div>
 
       {/* Content */}
       {hasNoSessions ? (

src/app/teams/[id]/okrs/[okrId]/edit/page.tsx

@@ -121,7 +121,7 @@ export default function EditOKRPage() {
 
   if (loading) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">Chargement...</div>
       </main>
     );
@@ -129,7 +129,7 @@ export default function EditOKRPage() {
 
   if (!okr) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">OKR non trouvé</div>
       </main>
     );
@@ -147,7 +147,7 @@ export default function EditOKRPage() {
   };
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-4">
       <div className="mb-6">
         <Link href={`/teams/${teamId}/okrs/${okrId}`} className="text-muted hover:text-foreground">
           ← Retour à l&apos;OKR

src/app/teams/[id]/okrs/[okrId]/page.tsx

@@ -124,7 +124,7 @@ export default function OKRDetailPage() {
 
   if (loading) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">Chargement...</div>
       </main>
     );
@@ -132,7 +132,7 @@ export default function OKRDetailPage() {
 
   if (!okr) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">OKR non trouvé</div>
       </main>
     );
@@ -145,7 +145,7 @@ export default function OKRDetailPage() {
   const canDelete = okr.permissions?.canDelete ?? false;
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-4">
       <div className="mb-6">
         <Link href={`/teams/${teamId}`} className="text-muted hover:text-foreground">
           ← Retour à l&apos;équipe

src/app/teams/[id]/okrs/new/page.tsx

@@ -54,14 +54,14 @@ export default function NewOKRPage() {
 
   if (loading) {
     return (
-      <main className="mx-auto max-w-4xl px-4 py-8">
+      <main className="mx-auto max-w-4xl px-4">
         <div className="text-center">Chargement...</div>
       </main>
     );
   }
 
   return (
-    <main className="mx-auto max-w-4xl px-4 py-8">
+    <main className="mx-auto max-w-4xl px-4">
       <div className="mb-6">
         <Link href={`/teams/${teamId}`} className="text-muted hover:text-foreground">
           ← Retour à l&apos;équipe

src/app/teams/[id]/page.tsx

@@ -39,7 +39,7 @@ export default async function TeamDetailPage({ params }: TeamDetailPageProps) {
   const okrsData = await getTeamOKRs(id);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="mb-4 flex items-center gap-2">

src/app/teams/new/page.tsx

@@ -48,7 +48,7 @@ export default function NewTeamPage() {
   };
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <div className="mb-6">
         <Link href="/teams" className="text-muted hover:text-foreground">
           ← Retour aux équipes

src/app/teams/page.tsx

@@ -2,7 +2,7 @@ import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import Link from 'next/link';
 import { TeamCard } from '@/components/teams';
-import { Button } from '@/components/ui';
+import { Button, PageHeader } from '@/components/ui';
 import { getUserTeams } from '@/services/teams';
 
 export default async function TeamsPage() {
@@ -15,23 +15,19 @@ export default async function TeamsPage() {
   const teams = await getUserTeams(session.user.id);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
-      {/* Header */}
+      <PageHeader
-      <div className="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        emoji="👥"
-        <div>
+        title="Équipes"
-          <h1 className="text-3xl font-bold text-foreground">Équipes</h1>
+        subtitle={`${teams.length} équipe${teams.length !== 1 ? 's' : ''} · Collaborez et définissez vos OKRs`}
-          <p className="mt-1 text-muted">
+        actions={
-            {teams.length} équipe{teams.length !== 1 ? 's' : ''}
-          </p>
-        </div>
-        <div>
           <Link href="/teams/new">
             <Button className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent">
               Créer une équipe
             </Button>
           </Link>
-        </div>
+        }
-      </div>
+      />
 
       {/* Teams Grid */}
       {teams.length > 0 ? (

src/app/users/page.tsx

@@ -2,6 +2,7 @@ import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import { getAllUsersWithStats } from '@/services/auth';
 import { getGravatarUrl } from '@/lib/gravatar';
+import { PageHeader } from '@/components/ui';
 
 function formatRelativeTime(date: Date): string {
   const now = new Date();
@@ -33,15 +34,12 @@ export default async function UsersPage() {
   const avgSessionsPerUser = users.length > 0 ? totalSessions / users.length : 0;
 
   return (
-    <main className="mx-auto max-w-6xl px-4 py-8">
+    <main className="mx-auto max-w-6xl px-4">
-      {/* Header */}
+      <PageHeader
-      <div className="mb-8">
+        emoji="🧑‍💻"
-        <h1 className="text-3xl font-bold text-foreground">Utilisateurs</h1>
+        title="Utilisateurs"
-        <p className="mt-1 text-muted">
+        subtitle={`${users.length} utilisateur${users.length > 1 ? 's' : ''} inscrit${users.length > 1 ? 's' : ''} · Vue d'ensemble de la communauté`}
-          {users.length} utilisateur{users.length > 1 ? 's' : ''} inscrit
+      />
-          {users.length > 1 ? 's' : ''}
-        </p>
-      </div>
 
       {/* Global Stats */}
       <div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-4">

src/app/weather/[id]/page.tsx

@@ -45,7 +45,7 @@ export default async function WeatherSessionPage({ params }: WeatherSessionPageP
   ]);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">

src/app/weather/new/page.tsx

@@ -63,7 +63,7 @@ export default function NewWeatherPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">

src/app/weekly-checkin/[id]/page.tsx

@@ -47,7 +47,7 @@ export default async function WeeklyCheckInSessionPage({ params }: WeeklyCheckIn
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">

src/app/weekly-checkin/new/page.tsx

@@ -66,7 +66,7 @@ export default function NewWeeklyCheckInPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">

src/app/year-review/[id]/page.tsx

@@ -31,7 +31,7 @@ export default async function YearReviewSessionPage({ params }: YearReviewSessio
   }
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-8">
+    <main className="mx-auto max-w-7xl px-4">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-muted mb-2">

src/app/year-review/new/page.tsx

@@ -49,7 +49,7 @@ export default function NewYearReviewPage() {
   }
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8">
+    <main className="mx-auto max-w-2xl px-4">
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">

src/components/ui/PageHeader.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+interface PageHeaderProps {
+  emoji: string;
+  title: string;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({ emoji, title, subtitle, actions, className }: PageHeaderProps) {
+  return (
+    <div className={`mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 ${className ?? ''}`}>
+      <div>
+        <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight text-foreground">
+          <span className="text-3xl leading-none">{emoji}</span>
+          {title}
+        </h1>
+        {subtitle && <p className="mt-1.5 text-sm text-muted">{subtitle}</p>}
+      </div>
+      {actions && <div className="shrink-0">{actions}</div>}
+    </div>
+  );
+}

src/components/ui/index.ts

@@ -9,6 +9,7 @@ export { EditableMotivatorTitle } from './EditableMotivatorTitle';
 export { EditableYearReviewTitle } from './EditableYearReviewTitle';
 export { EditableWeeklyCheckInTitle } from './EditableWeeklyCheckInTitle';
 export { EditableWeatherTitle } from './EditableWeatherTitle';
+export { PageHeader } from './PageHeader';
 export { Input } from './Input';
 export { ParticipantInput } from './ParticipantInput';
 export { Modal, ModalFooter } from './Modal';