initialisation du projet

frontend/src/pages/MesGains.jsx

@@ -0,0 +1,35 @@
+const MOCK_GAINS = [
+  { id: 1, code: 'TTT-00123', lot: 'Infusion découverte (30g)', status: 'PENDING' },
+  { id: 2, code: 'TTT-00456', lot: 'Thé signature (100g)', status: 'DELIVERED' },
+]
+
+const statusLabel = {
+  PENDING: { label: 'À récupérer', color: 'bg-yellow-100 text-yellow-800' },
+  DELIVERED: { label: 'Récupéré', color: 'bg-green-100 text-green-800' },
+  CANCELLED: { label: 'Annulé', color: 'bg-red-100 text-red-800' },
+}
+
+export default function MesGains() {
+  return (
+    <div className="min-h-screen bg-green-50 p-6">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold text-green-800 mb-2">Mes gains</h1>
+        <p className="text-gray-500 mb-6">Historique de vos participations</p>
+
+        <div className="space-y-4">
+          {MOCK_GAINS.map((gain) => (
+            <div key={gain.id} className="bg-white rounded-xl shadow p-5 flex items-center justify-between">
+              <div>
+                <p className="font-semibold text-gray-800">{gain.lot}</p>
+                <p className="text-sm text-gray-400 font-mono mt-1">{gain.code}</p>
+              </div>
+              <span className={`text-xs font-semibold px-3 py-1 rounded-full ${statusLabel[gain.status].color}`}>
+                {statusLabel[gain.status].label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}