feat: add SWOT and Moving Motivators sections to homepage with detailed explanations and interactive components

src/app/page.tsx

@@ -55,6 +55,177 @@ export default function Home() {
           </div>
         </section>
 
+        {/* SWOT 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">L&apos;Analyse SWOT</h2>
+              <p className="text-primary font-medium">Un outil stratégique incontournable</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 SWOT ?
+              </h3>
+              <p className="text-muted mb-4">
+                L&apos;analyse SWOT est un outil puissant pour prendre du recul sur une situation professionnelle. 
+                Elle permet de dresser un portrait objectif et structuré, base indispensable pour définir des actions pertinentes.
+              </p>
+              <ul className="space-y-2 text-sm text-muted">
+                <li className="flex items-start gap-2">
+                  <span className="text-primary">•</span>
+                  Identifier clairement les atouts sur lesquels capitaliser
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary">•</span>
+                  Reconnaître les axes d&apos;amélioration prioritaires
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary">•</span>
+                  Anticiper les risques et les transformer en opportunités
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary">•</span>
+                  Créer un plan d&apos;action concret et partagé
+                </li>
+              </ul>
+            </div>
+
+            {/* What we look for */}
+            <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>
+                Ce qu&apos;on cherche
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="rounded-lg bg-green-500/10 p-3 border border-green-500/20">
+                  <p className="font-semibold text-green-600 text-sm mb-1">💪 Forces</p>
+                  <p className="text-xs text-muted">Compétences, talents, réussites, qualités distinctives</p>
+                </div>
+                <div className="rounded-lg bg-orange-500/10 p-3 border border-orange-500/20">
+                  <p className="font-semibold text-orange-600 text-sm mb-1">⚠️ Faiblesses</p>
+                  <p className="text-xs text-muted">Lacunes, difficultés récurrentes, axes de progression</p>
+                </div>
+                <div className="rounded-lg bg-blue-500/10 p-3 border border-blue-500/20">
+                  <p className="font-semibold text-blue-600 text-sm mb-1">🚀 Opportunités</p>
+                  <p className="text-xs text-muted">Projets, formations, évolutions, nouveaux défis</p>
+                </div>
+                <div className="rounded-lg bg-red-500/10 p-3 border border-red-500/20">
+                  <p className="font-semibold text-red-600 text-sm mb-1">🛡️ Menaces</p>
+                  <p className="text-xs text-muted">Risques, obstacles, changements défavorables</p>
+                </div>
+              </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="Remplir la matrice" description="Identifiez ensemble les éléments de chaque quadrant lors d'un échange constructif" />
+                <StepCard number={2} title="Prioriser" description="Classez les éléments par importance et impact pour concentrer les efforts" />
+                <StepCard number={3} title="Croiser" description="Reliez les forces aux opportunités, anticipez les menaces avec les atouts" />
+                <StepCard number={4} title="Agir" description="Définissez des actions concrètes avec des échéances et des responsables" />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Moving Motivators 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">Moving Motivators</h2>
+              <p className="text-purple-500 font-medium">Comprendre ce qui nous anime vraiment</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 explorer ses motivations ?
+              </h3>
+              <p className="text-muted mb-4">
+                Créé par Jurgen Appelo (Management 3.0), cet exercice révèle les motivations intrinsèques qui nous animent. 
+                Comprendre ce qui nous motive permet de mieux s&apos;épanouir et d&apos;aligner nos missions avec nos aspirations profondes.
+              </p>
+              <ul className="space-y-2 text-sm text-muted">
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Prendre conscience de ses moteurs profonds
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Anticiper l&apos;impact d&apos;un changement sur sa motivation
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Faciliter les discussions sur l&apos;engagement et le bien-être
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Adapter les missions aux aspirations individuelles
+                </li>
+              </ul>
+            </div>
+
+            {/* The 10 motivators */}
+            <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 10 motivations intrinsèques
+              </h3>
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                <MotivatorPill icon="👑" name="Statut" color="#8b5cf6" />
+                <MotivatorPill icon="⚡" name="Pouvoir" color="#ef4444" />
+                <MotivatorPill icon="📋" name="Ordre" color="#6b7280" />
+                <MotivatorPill icon="🤝" name="Acceptation" color="#f59e0b" />
+                <MotivatorPill icon="🏅" name="Honneur" color="#eab308" />
+                <MotivatorPill icon="🎯" name="Maîtrise" color="#22c55e" />
+                <MotivatorPill icon="👥" name="Relations" color="#ec4899" />
+                <MotivatorPill icon="🦅" name="Liberté" color="#06b6d4" />
+                <MotivatorPill icon="🔍" name="Curiosité" color="#3b82f6" />
+                <MotivatorPill icon="🧭" name="But" color="#14b8a6" />
+              </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-3 gap-4">
+                <StepCard 
+                  number={1} 
+                  title="Classer par importance" 
+                  description="Ordonnez les 10 cartes de la moins importante (gauche) à la plus importante (droite) pour vous" 
+                />
+                <StepCard 
+                  number={2} 
+                  title="Évaluer l'influence" 
+                  description="Pour chaque motivation, indiquez si votre situation actuelle l'impacte positivement ou négativement" 
+                />
+                <StepCard 
+                  number={3} 
+                  title="Analyser et discuter" 
+                  description="Le récapitulatif révèle les motivations clés et les points de vigilance pour un échange constructif" 
+                />
+              </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">
@@ -82,7 +253,7 @@ export default function Home() {
 
       {/* Footer */}
       <footer className="border-t border-border py-6 text-center text-sm text-muted">
-        Workshop Manager — Vos ateliers managériaux en ligne
+        Workshop Manager — Vos ateliers en ligne
       </footer>
     </>
   );
@@ -186,3 +357,45 @@ function BenefitCard({
     </div>
   );
 }
+
+function StepCard({
+  number,
+  title,
+  description,
+}: {
+  number: number;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="relative">
+      <div className="flex items-center gap-3 mb-2">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-sm">
+          {number}
+        </div>
+        <h4 className="font-semibold text-foreground">{title}</h4>
+      </div>
+      <p className="text-sm text-muted pl-11">{description}</p>
+    </div>
+  );
+}
+
+function MotivatorPill({
+  icon,
+  name,
+  color,
+}: {
+  icon: string;
+  name: string;
+  color: string;
+}) {
+  return (
+    <div
+      className="flex items-center gap-2 px-3 py-1.5 rounded-full"
+      style={{ backgroundColor: `${color}15`, border: `1px solid ${color}30` }}
+    >
+      <span>{icon}</span>
+      <span className="font-medium" style={{ color }}>{name}</span>
+    </div>
+  );
+}