From 08f339c346f7585565feffa851c23f915a7febca Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 28 Nov 2025 09:52:58 +0100
Subject: [PATCH] feat: add SWOT and Moving Motivators sections to homepage
 with detailed explanations and interactive components

---
 dev.db           | Bin 229376 -> 229376 bytes
 src/app/page.tsx | 215 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 214 insertions(+), 1 deletion(-)

diff --git a/dev.db b/dev.db
index 7c5eb707a590a9c471eb8968a6ce2b9984e064bc..dfc148ad621218c80815823c730a00eda180f7f0 100644
GIT binary patch
delta 987
zcmZ{jZ%7ki9LMi@p6PD4?QSD6L#-tv2;1$syRF^!W=0O_g#|VcD{#x{(rw;yE<wmP
zG)Rb?5&hmpy~zmrhselRMf5&=Z{&Ml^tLGK&dqI&_2z;5et-A5@ALg}g#uqF@TG1P
zUGF)MqQ%(V7}|>AXXD-0#|*~-BdiE4f1kJ7*X&N)BU>j2)~-#b<F^Hl&EO^D@Ss0%
zE{z8TpB$1Uky6@EX^2wjN@1;27bTzQlY<qJVVJ@R#DZ%EpMp;*JZPy6fFq45G99pL
zstOO%*o)emRci+4YeNB8&0rCkn}^zFu>u2W9C03gM6IM)B(R>r9k6?q*x}7AZbRhY
z-CEkiIn0KSA`1u_K8d&*UZx@qNU)^gTs=eir-r!!Lb*7YODL{)^uuzemxR$oW_mg$
zO-@bf%_xgBt0jY}?A%Rdp4Qz&Hm$p|;pV1NT0#osymdD?aZ7h4!(H^xFHkw36YH*;
zSkPT+xN~YUf8)9q_f*~Tw{7gsbJX;a5k3p6!Z7e((3Q=;?3f9D`7jIb{lx7!+?!k}
zhr&BQIdh;I_f#sXx278FRHTY3)>TE60#$;itP?JWTs%RHK>3)xWcy(KZgp`{%RP46
zyx$%%Js~>;=^gE2ckv=+!{KnS*gN#!s$g#epM~)eavHwA#60Z8iKH~;E?)3fI7h0S
z7Ns_DhOZF^_@bn9=+bCpr0=#&Wxq#~JhB?4fsny&xc#zQG}!$sqg8f`mB3z-JcPH;
zaSu3N>xU~zRCxLdtKizuAJ<;!xg%r5VdQS?aM|tom)&BaE!bIu*aM|ea@_dyq=x>>
J`wOIl{R^2f4v+u<

delta 415
zcmZo@;A?2$n;^~TGf~Ew(Wfz?HGy$!0@K2HX$A%cE^Y}1{uX`?z8*eq-hN&|o+&(H
z+|#%vHVX>;<(w{=#Z<>@WnfUv%3&|g$Y}5GKK<fqCP{V=e?R{qE~e>@IZQ6o^HZ2P
zIE=Lo41fx2r%Plr<xjtB%FMxM4iT#3<gk}#<e09I#iTa<a5hlGSu<u1M#Jd>IZOtO
ztPnHSr2~bGr}yPB=`*sU2yy2!l}-ms8%^)bWzu8h0!wom8(J9~=vkT>PiM_zGG=5$
zXySyrrHXm_#9Stk>35@<d8e<>V`81|ki+B(HjC2;;<hR#h!VMcCLu;<gb|EJ)9dn?
ziXrwIZvU0f#O1)O!*z2y`vk^FV9-=@ZNIsTNxPIwhjk+Z|55%<e&6YQ7Z`(pQh}_~
z|ClgwY~N|h>}@5%#r}qY-+(WHcLL7=?ho7wTp^qt9J|=x02N+f-~OhYS%d=s{seHZ

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b61cfdb..2f72de2 100644
--- a/src/app/page.tsx
+++ b/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>
+  );
+}