Add examples section to ChallengesSection component: Introduce a toggleable examples section with detailed challenge descriptions and suggested points, enhancing user engagement and clarity on challenge expectations.

components/challenges/ChallengesSection.tsx

@@ -72,6 +72,7 @@ export default function ChallengesSection({
   const [pointsReward, setPointsReward] = useState(100);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [showExamples, setShowExamples] = useState(false);
 
   useEffect(() => {
     fetchChallenges();
@@ -452,6 +453,95 @@ export default function ChallengesSection({
             })}
           </div>
         )}
+
+        {/* Examples Section */}
+        <Card variant="dark" className="mt-8">
+          <button
+            onClick={() => setShowExamples(!showExamples)}
+            className="w-full flex items-center justify-between p-4 text-left"
+          >
+            <h3 className="text-lg font-bold text-pixel-gold">
+              💡 Exemples de défis
+            </h3>
+            <span className="text-pixel-gold text-xl">
+              {showExamples ? "−" : "+"}
+            </span>
+          </button>
+          {showExamples && (
+            <div className="px-4 pb-4 space-y-4 border-t border-[var(--border)] pt-4">
+              <div className="space-y-3">
+                <div className="p-4 bg-black/40 rounded border border-[var(--border)]">
+                  <h4 className="font-bold text-pixel-gold mb-2">
+                    Qui participera à plus d&apos;événements ce mois ?
+                  </h4>
+                  <p className="text-sm text-gray-300">
+                    Le joueur qui participe au plus grand nombre d&apos;événements
+                    organisés ce mois remporte le défi. Les événements doivent
+                    être validés par un admin pour compter.
+                  </p>
+                  <div className="mt-2 text-xs text-gray-400">
+                    Points suggérés: 150
+                  </div>
+                </div>
+
+                <div className="p-4 bg-black/40 rounded border border-[var(--border)]">
+                  <h4 className="font-bold text-pixel-gold mb-2">
+                    Premier à atteindre le niveau 10
+                  </h4>
+                  <p className="text-sm text-gray-300">
+                    Le premier joueur à atteindre le niveau 10 remporte le défi.
+                    Le niveau est calculé automatiquement selon le score total.
+                  </p>
+                  <div className="mt-2 text-xs text-gray-400">
+                    Points suggérés: 200
+                  </div>
+                </div>
+
+                <div className="p-4 bg-black/40 rounded border border-[var(--border)]">
+                  <h4 className="font-bold text-pixel-gold mb-2">
+                    Meilleur feedback sur un événement
+                  </h4>
+                  <p className="text-sm text-gray-300">
+                    Le joueur qui donne le feedback le plus détaillé et
+                    constructif sur un événement remporte le défi. L&apos;admin
+                    désignera le gagnant selon la qualité du feedback.
+                  </p>
+                  <div className="mt-2 text-xs text-gray-400">
+                    Points suggérés: 100
+                  </div>
+                </div>
+
+                <div className="p-4 bg-black/40 rounded border border-[var(--border)]">
+                  <h4 className="font-bold text-pixel-gold mb-2">
+                    Plus grand nombre de points gagnés cette semaine
+                  </h4>
+                  <p className="text-sm text-gray-300">
+                    Le joueur qui accumule le plus de points cette semaine
+                    remporte le défi. Seuls les points gagnés après l&apos;acceptation
+                    du défi comptent.
+                  </p>
+                  <div className="mt-2 text-xs text-gray-400">
+                    Points suggérés: 250
+                  </div>
+                </div>
+
+                <div className="p-4 bg-black/40 rounded border border-[var(--border)]">
+                  <h4 className="font-bold text-pixel-gold mb-2">
+                    Défi créatif : meilleure bio de profil
+                  </h4>
+                  <p className="text-sm text-gray-300">
+                    Le joueur avec la bio de profil la plus créative et originale
+                    remporte le défi. L&apos;admin désignera le gagnant selon
+                    l&apos;originalité et la qualité de la bio.
+                  </p>
+                  <div className="mt-2 text-xs text-gray-400">
+                    Points suggérés: 120
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Card>
       </div>
     </section>
   );