feat: implement Year Review feature with session management, item categorization, and real-time collaboration

src/app/page.tsx

@@ -20,7 +20,7 @@ export default function Home() {
           <h2 className="mb-8 text-center text-2xl font-bold text-foreground">
             Choisissez votre atelier
           </h2>
-          <div className="grid gap-8 md:grid-cols-2 max-w-4xl mx-auto">
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
             {/* SWOT Workshop Card */}
             <WorkshopCard
               href="/sessions?tab=swot"
@@ -52,6 +52,22 @@ export default function Home() {
               accentColor="#8b5cf6"
               newHref="/motivators/new"
             />
+
+            {/* Year Review Workshop Card */}
+            <WorkshopCard
+              href="/sessions?tab=year-review"
+              icon="📅"
+              title="Year Review"
+              tagline="Faites le bilan de l'année"
+              description="Réalisez un bilan complet de l'année écoulée. Identifiez réalisations, défis, apprentissages et définissez vos objectifs pour l'année à venir."
+              features={[
+                '5 catégories : Réalisations, Défis, Apprentissages, Objectifs, Moments',
+                'Organisation par drag & drop',
+                'Vue d\'ensemble de l\'année',
+              ]}
+              accentColor="#f59e0b"
+              newHref="/year-review/new"
+            />
           </div>
         </section>
 
@@ -250,6 +266,95 @@ export default function Home() {
           </div>
         </section>
 
+        {/* Year Review Deep Dive Section */}
+        <section className="mb-16">
+          <div className="flex items-center gap-3 mb-8">
+            <span className="text-4xl">📅</span>
+            <div>
+              <h2 className="text-3xl font-bold text-foreground">Year Review</h2>
+              <p className="text-amber-500 font-medium">Faites le bilan de l&apos;année écoulée</p>
+            </div>
+          </div>
+
+          <div className="grid gap-8 lg:grid-cols-2">
+            {/* Why */}
+            <div className="rounded-xl border border-border bg-card p-6">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">💭</span>
+                Pourquoi faire un bilan annuel ?
+              </h3>
+              <p className="text-muted mb-4">
+                Le Year Review est un exercice de réflexion structuré qui permet de prendre du recul
+                sur l&apos;année écoulée. Il aide à identifier les patterns, célébrer les réussites,
+                apprendre des défis et préparer l&apos;avenir avec clarté.
+              </p>
+              <ul className="space-y-2 text-sm text-muted">
+                <li className="flex items-start gap-2">
+                  <span className="text-amber-500">•</span>
+                  Prendre conscience de ses accomplissements et les célébrer
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-amber-500">•</span>
+                  Identifier les apprentissages et compétences développées
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-amber-500">•</span>
+                  Comprendre les défis rencontrés pour mieux les anticiper
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-amber-500">•</span>
+                  Définir des objectifs clairs et motivants pour l&apos;année à venir
+                </li>
+              </ul>
+            </div>
+
+            {/* The 5 categories */}
+            <div className="rounded-xl border border-border bg-card p-6">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">📋</span>
+                Les 5 catégories du bilan
+              </h3>
+              <div className="space-y-3">
+                <CategoryPill icon="🏆" name="Réalisations" color="#22c55e" description="Ce que vous avez accompli" />
+                <CategoryPill icon="⚔️" name="Défis" color="#ef4444" description="Les difficultés rencontrées" />
+                <CategoryPill icon="📚" name="Apprentissages" color="#3b82f6" description="Ce que vous avez appris" />
+                <CategoryPill icon="🎯" name="Objectifs" color="#8b5cf6" description="Vos ambitions pour l'année prochaine" />
+                <CategoryPill icon="⭐" name="Moments" color="#f59e0b" description="Les moments forts et marquants" />
+              </div>
+            </div>
+
+            {/* How it works */}
+            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
+              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="text-2xl">⚙️</span>
+                Comment ça marche ?
+              </h3>
+              <div className="grid md:grid-cols-4 gap-4">
+                <StepCard
+                  number={1}
+                  title="Réfléchir"
+                  description="Prenez le temps de revenir sur l'année écoulée, consultez votre agenda, vos notes, vos projets"
+                />
+                <StepCard
+                  number={2}
+                  title="Catégoriser"
+                  description="Organisez vos réflexions dans les 5 catégories : réalisations, défis, apprentissages, objectifs et moments"
+                />
+                <StepCard
+                  number={3}
+                  title="Prioriser"
+                  description="Classez les éléments par importance et impact pour identifier ce qui compte vraiment"
+                />
+                <StepCard
+                  number={4}
+                  title="Planifier"
+                  description="Utilisez ce bilan pour définir vos objectifs et actions pour l'année à venir"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Benefits Section */}
         <section className="rounded-2xl border border-border bg-card p-8">
           <h2 className="mb-8 text-center text-2xl font-bold text-foreground">
@@ -420,3 +525,30 @@ function MotivatorPill({ icon, name, color }: { icon: string; name: string; colo
     </div>
   );
 }
+
+function CategoryPill({
+  icon,
+  name,
+  color,
+  description,
+}: {
+  icon: string;
+  name: string;
+  color: string;
+  description: string;
+}) {
+  return (
+    <div
+      className="flex items-start gap-3 px-4 py-3 rounded-lg"
+      style={{ backgroundColor: `${color}10`, border: `1px solid ${color}30` }}
+    >
+      <span className="text-xl">{icon}</span>
+      <div className="flex-1">
+        <p className="font-semibold text-sm mb-0.5" style={{ color }}>
+          {name}
+        </p>
+        <p className="text-xs text-muted">{description}</p>
+      </div>
+    </div>
+  );
+}