feat: introduce Teams & OKRs feature with models, types, and UI components for team management and objective tracking

src/app/page.tsx

@@ -355,6 +355,114 @@ export default function Home() {
           </div>
         </section>
 
+        {/* OKRs 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">OKRs & Équipes</h2>
+              <p className="text-purple-500 font-medium">Définissez et suivez les objectifs de votre équipe</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 utiliser les OKRs ?
+              </h3>
+              <p className="text-muted mb-4">
+                Les OKRs (Objectives and Key Results) sont un cadre de gestion d&apos;objectifs qui permet
+                d&apos;aligner les efforts de l&apos;équipe autour d&apos;objectifs communs et mesurables.
+                Cette méthode favorise la transparence, la responsabilisation et la performance collective.
+              </p>
+              <ul className="space-y-2 text-sm text-muted">
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Aligner les objectifs individuels avec ceux de l&apos;équipe
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Suivre la progression en temps réel avec des métriques claires
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Favoriser la transparence et la visibilité des objectifs de chacun
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-500">•</span>
+                  Créer une culture de responsabilisation et de résultats
+                </li>
+              </ul>
+            </div>
+
+            {/* Features */}
+            <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>
+                Fonctionnalités principales
+              </h3>
+              <div className="space-y-3">
+                <FeaturePill 
+                  icon="👥" 
+                  name="Gestion d'équipes" 
+                  color="#8b5cf6" 
+                  description="Créez des équipes et gérez les membres avec des rôles admin/membre" 
+                />
+                <FeaturePill 
+                  icon="🎯" 
+                  name="OKRs par période" 
+                  color="#3b82f6" 
+                  description="Définissez des OKRs pour des trimestres ou périodes personnalisées" 
+                />
+                <FeaturePill 
+                  icon="📊" 
+                  name="Key Results mesurables" 
+                  color="#10b981" 
+                  description="Suivez la progression de chaque Key Result avec des valeurs et pourcentages" 
+                />
+                <FeaturePill 
+                  icon="👁️" 
+                  name="Visibilité transparente" 
+                  color="#f59e0b" 
+                  description="Tous les membres de l'équipe peuvent voir les OKRs de chacun" 
+                />
+              </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="Créer une équipe"
+                  description="Formez votre équipe et ajoutez les membres avec leurs rôles (admin ou membre)"
+                />
+                <StepCard
+                  number={2}
+                  title="Définir les OKRs"
+                  description="Pour chaque membre, créez un Objectif avec plusieurs Key Results mesurables"
+                />
+                <StepCard
+                  number={3}
+                  title="Suivre la progression"
+                  description="Mettez à jour régulièrement les valeurs des Key Results pour suivre l'avancement"
+                />
+                <StepCard
+                  number={4}
+                  title="Visualiser et analyser"
+                  description="Consultez les OKRs par membre ou en grille, avec les progressions et statuts colorés"
+                />
+              </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">
@@ -552,3 +660,30 @@ function CategoryPill({
     </div>
   );
 }
+
+function FeaturePill({
+  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>
+  );
+}