Refonte front : flux inscription/connexion, saisie code et historique gains

- Redesign Connexion, Inscription avec modal succès et compte à rebours
- Page SaisirCodeUnique connectée au backend avec overlay Félicitation
- Page Perdu pour les codes invalides/déjà utilisés
- MesGains redesigné en timeline avec appel API et bouton saisir nouveau code
- Profile redesigné avec onglets et données depuis localStorage
- Service game.js ajouté (participateApi, myGainsApi)
- Ajout des designs de référence dans frontend/Design/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/Connexion.jsx

@@ -23,7 +23,7 @@ export default function Connexion() {
       localStorage.setItem('user', JSON.stringify(user))
       if (user.role === 'ADMIN') navigate('/admin')
       else if (user.role === 'EMPLOYEE') navigate('/employe')
-      else navigate('/participation')
+      else navigate('/mes-gains')
     } catch (err) {
       setError(err.message)
     } finally {

frontend/src/pages/Inscription.jsx

@@ -1,18 +1,25 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { registerApi } from '../services/auth'
 
 export default function Inscription() {
   const navigate = useNavigate()
-  const [form, setForm] = useState({
-    email: '',
-    lastName: '',
-    firstName: '',
-    password: '',
-  })
+  const [form, setForm] = useState({ email: '', lastName: '', firstName: '', password: '' })
   const [showPassword, setShowPassword] = useState(false)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [successName, setSuccessName] = useState(null)
+  const [countdown, setCountdown] = useState(5)
+
+  useEffect(() => {
+    if (successName === null) return
+    if (countdown === 0) {
+      navigate('/saisir-code-unique')
+      return
+    }
+    const t = setTimeout(() => setCountdown((c) => c - 1), 1000)
+    return () => clearTimeout(t)
+  }, [successName, countdown, navigate])
 
   const handleChange = (e) => {
     const { name, value } = e.target
@@ -30,7 +37,7 @@ export default function Inscription() {
         lastname: form.lastName,
         password: form.password,
       })
-      navigate('/connexion', { state: { registered: true } })
+      setSuccessName(form.firstName)
     } catch (err) {
       setError(err.message)
     } finally {
@@ -53,7 +60,6 @@ export default function Inscription() {
       )}
 
       <form onSubmit={handleSubmit} className="space-y-5">
-
         <div>
           <label className="block text-sm font-medium text-gray-800 mb-1">
             Adresse email <span className="text-gray-800">*</span>
@@ -120,9 +126,7 @@ export default function Inscription() {
               aria-label="Afficher/masquer le mot de passe"
             >
               <div className="w-6 h-6 rounded-full border-2 border-gray-400 flex items-center justify-center">
-                {showPassword && (
-                  <div className="w-1.5 h-1.5 rounded-full bg-gray-400" />
-                )}
+                {showPassword && <div className="w-1.5 h-1.5 rounded-full bg-gray-400" />}
               </div>
             </button>
           </div>
@@ -144,32 +148,42 @@ export default function Inscription() {
       </div>
 
       <div className="grid grid-cols-2 gap-3">
-        <button
-          type="button"
-          className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
-        >
-          <div className="w-5 h-5 rounded-full border border-gray-400 flex items-center justify-center text-[10px] font-bold text-gray-500">
-            G
-          </div>
+        <button type="button" className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+          <div className="w-5 h-5 rounded-full border border-gray-400 flex items-center justify-center text-[10px] font-bold text-gray-500">G</div>
           Google
         </button>
-        <button
-          type="button"
-          className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
-        >
-          <div className="w-5 h-5 rounded-full border border-gray-400 flex items-center justify-center text-[10px] font-bold text-gray-500">
-            f
-          </div>
+        <button type="button" className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+          <div className="w-5 h-5 rounded-full border border-gray-400 flex items-center justify-center text-[10px] font-bold text-gray-500">f</div>
           Facebook
         </button>
       </div>
 
       <p className="text-center text-sm text-gray-500 mt-8">
         Vous avez déjà un compte ?{' '}
-        <Link to="/connexion" className="text-gray-700 font-medium hover:underline">
-          Se connecter
-        </Link>
+        <Link to="/connexion" className="text-gray-700 font-medium hover:underline">Se connecter</Link>
       </p>
+
+      {/* Modal succès */}
+      {successName !== null && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 px-6">
+          <div className="bg-white rounded-2xl p-8 w-full max-w-sm text-center shadow-xl">
+            <div className="flex justify-center mb-5">
+              <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
+                <svg className="w-9 h-9 text-white" fill="none" stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">
+              Bienvenue {successName}&nbsp;!!
+            </h2>
+            <p className="text-gray-500 text-sm leading-relaxed">
+              Votre compte a été créé avec succès. Vous serez redirigé vers l'étape suivante dans{' '}
+              <span className="font-semibold text-[#006B6B]">{countdown}</span> secondes.
+            </p>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

frontend/src/pages/MesGains.jsx

@@ -1,34 +1,108 @@
-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' },
-]
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { myGainsApi } from '../services/game'
 
-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' },
+function TabNav({ active }) {
+  return (
+    <div className="flex border-b border-gray-200 mb-6">
+      <Link
+        to="/mes-gains"
+        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
+          active === 'gains'
+            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+            : 'text-gray-400'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
+        </svg>
+        Mes gains
+      </Link>
+      <Link
+        to="/profile"
+        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
+          active === 'profile'
+            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+            : 'text-gray-400'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+        Profile
+      </Link>
+    </div>
+  )
+}
+
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
 }
 
 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>
+  const [gains, setGains] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
 
-        <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>
-          ))}
+  useEffect(() => {
+    myGainsApi()
+      .then((data) => setGains(data.gains))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-white max-w-sm mx-auto px-6 pt-6">
+      <TabNav active="gains" />
+
+      <Link
+        to="/saisir-code-unique"
+        className="flex items-center justify-center gap-2 w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors mb-6 text-sm"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+        </svg>
+        Saisir un nouveau code
+      </Link>
+
+      {loading && (
+        <p className="text-center text-gray-400 text-sm mt-8">Chargement...</p>
+      )}
+
+      {error && (
+        <div className="px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
+          {error}
         </div>
+      )}
+
+      {!loading && !error && gains.length === 0 && (
+        <p className="text-center text-gray-400 text-sm mt-8">Aucun gain pour le moment.</p>
+      )}
+
+      {/* Timeline */}
+      <div className="relative">
+        {gains.map((gain, index) => (
+          <div key={gain.participationId} className="flex gap-4">
+            {/* Ligne verticale + cercle */}
+            <div className="flex flex-col items-center">
+              <div className="w-3 h-3 mt-1 rounded-full border-2 border-gray-400 flex-shrink-0" />
+              {index < gains.length - 1 && (
+                <div className="w-px flex-1 bg-gray-200 my-1" />
+              )}
+            </div>
+
+            {/* Contenu */}
+            <div className={`flex-1 pb-6 ${index === 0 ? 'bg-gray-50 rounded-lg px-3 pt-1 -ml-1' : ''}`}>
+              <p className="font-semibold text-gray-800 text-sm">{gain.lot}</p>
+              <p className="text-gray-500 text-xs mt-1 leading-relaxed">{gain.description}</p>
+              <p className="text-[#006B6B] text-xs mt-2">Gain obtenu le {formatDate(gain.wonAt)}</p>
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   )

frontend/src/pages/Perdu.jsx

@@ -0,0 +1,37 @@
+import { useLocation, useNavigate } from 'react-router-dom'
+
+export default function Perdu() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const message = location.state?.message
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-8 max-w-sm mx-auto text-center">
+
+      <div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mb-6">
+        <svg className="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+
+      <h1 className="text-3xl font-bold italic font-serif text-[#006B6B] mb-2">
+        Réessayer la prochaine fois
+      </h1>
+
+      <p className="text-gray-500 text-sm mb-2">
+        {message || 'Ce code est invalide ou a déjà été utilisé.'}
+      </p>
+
+      <p className="text-gray-400 text-xs mb-8">
+        Vérifiez le code présent sur votre ticket et réessayez.
+      </p>
+
+      <button
+        onClick={() => navigate('/saisir-code-unique')}
+        className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
+      >
+        Réessayer
+      </button>
+    </div>
+  )
+}

frontend/src/pages/Profile.jsx

@@ -1,94 +1,89 @@
-import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+function TabNav({ active }) {
+  return (
+    <div className="flex border-b border-gray-200 mb-6">
+      <Link
+        to="/mes-gains"
+        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
+          active === 'gains'
+            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+            : 'text-gray-400'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
+        </svg>
+        Mes gains
+      </Link>
+      <Link
+        to="/profile"
+        className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors ${
+          active === 'profile'
+            ? 'text-[#006B6B] border-b-2 border-[#006B6B]'
+            : 'text-gray-400'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+        Profile
+      </Link>
+    </div>
+  )
+}
 
 export default function Profile() {
-    const [form, setForm] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-    })
+  const user = JSON.parse(localStorage.getItem('user') || '{}')
 
-    const handleChange = (e) => {
-        const { name, value } = e.target
-        setForm({ ...form, [name]: value })
-    }
+  const initials = `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
 
-    const handleSubmit = (e) => {
-        e.preventDefault()
-        // TODO: appeler backend pour update profil
-        alert('Profil mis à jour')
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    // TODO: connecter au backend pour update profil
+    alert('Modification du profil à venir')
+  }
 
-    // Initiales pour l'avatar
-    const initials = 'MD'
+  return (
+    <div className="min-h-screen bg-white max-w-sm mx-auto px-6 pt-6">
+      <TabNav active="profile" />
 
-    return (
-        <div className="min-h-screen bg-green-50 flex items-center justify-center p-4">
-            <div className="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
-                <h1 className="text-2xl font-bold text-gray-800 mb-6">Mon Profil</h1>
-                {/* Avatar */}
-                <div className="flex flex-col mb-6">
-                    <div className="w-20 h-20 rounded-full bg-green-700 flex items-center justify-center text-white text-2xl font-bold uppercase">
-                        {initials}
-                    </div>
-                </div>
-
-                {/* Formulaire */}
-                <form onSubmit={handleSubmit} className="space-y-5">
-
-                    {/* Email */}
-                    <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Adresse email
-                        </label>
-                        <input 
-                            type="email"
-                            name="email"
-                            value={form.email}
-                            onChange={handleChange}
-                            placeholder="mathieu.dupont@example.com"
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-
-                    {/* Nom */}
-                    <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Nom
-                        </label>
-                        <input 
-                            type="text"
-                            name="lastName"
-                            value={form.lastName}
-                            onChange={handleChange}
-                            placeholder="Dupont"
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-                    
-                    {/* Prénom */}
-                    <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
-                            Prénom
-                        </label>
-                        <input 
-                            type="text"
-                            name="firstName"
-                            value={form.firstName}
-                            onChange={handleChange}
-                            placeholder="Mathieu"
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-                    
-                    {/* Bouton de soumission */}
-                    <button 
-                        type="submit"
-                        className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors"
-                    >
-                        Modifier mon profil
-                    </button>
-                </form>
-            </div>
+      {/* Avatar */}
+      <div className="mb-6">
+        <div className="w-14 h-14 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-lg font-bold">
+          {initials}
         </div>
-    )
-}
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Adresse email</label>
+          <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
+            {user.email || '—'}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Nom</label>
+          <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
+            {user.lastname || '—'}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Prénom</label>
+          <div className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 bg-gray-50">
+            {user.firstname || '—'}
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
+        >
+          Modifier mon profil
+        </button>
+      </form>
+    </div>
+  )
+}

frontend/src/pages/SaisirCodeUnique.jsx

@@ -1,65 +1,88 @@
 import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { participateApi } from '../services/game'
 
 export default function SaisirCodeUnique() {
-    const [form, setForm] = useState({
-        codeUnique: '',
-    })
+  const navigate = useNavigate()
+  const [code, setCode] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [gain, setGain] = useState(null)
 
-    const handleChange = (e) => {
-        const { name, value } = e.target
-        setForm({ ...form, [name]: value.toUpperCase() })
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      const data = await participateApi(code.trim().toUpperCase())
+      setGain(data.gain)
+    } catch (err) {
+      navigate('/perdu', { state: { message: err.message } })
+    } finally {
+      setLoading(false)
     }
+  }
 
-    const handleSubmit = (e) => {
-        e.preventDefault()
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
 
-        const code = form.codeUnique.trim()
-        
-        if (!code) {
-            alert('Veuillez saisir un code')
-            return
-        }
-        if (code.length !== 10) {
-            alert('Le code doit contenir exactement 10 caractères')
-            return
-        }
-        
-        // TODO: appeler backend pour valider le code unique
-        alert('Code validé')
-    }
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold italic font-serif text-[#006B6B]">Saisir mon code gagnant</h1>
+        <p className="text-gray-500 mt-2 text-sm">Saisissez le code présent sur votre ticket</p>
+      </div>
 
-    return (
-        <div className="min-h-screen bg-green-50 flex items-center justify-center p-4">
-            <div className="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
-                <h1 className="text-3xl font-bold text-green-800 mb-2">Saisir mon code gagnant</h1>
-                <p className="text-gray-600 mb-6">Saisissez le code présent sur votre ticket</p>
-               
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <input
+          type="text"
+          value={code}
+          onChange={(e) => setCode(e.target.value.toUpperCase())}
+          placeholder="Votre code"
+          maxLength={10}
+          required
+          className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 bg-white focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
+        />
 
-                {/* Formulaire */}
-                <form onSubmit={handleSubmit} className="space-y-5">
+        <button
+          type="submit"
+          disabled={loading || code.length !== 10}
+          className="w-full bg-[#00786F] hover:bg-[#1A6B65] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
+        >
+          {loading ? 'Validation...' : 'Valider'}
+        </button>
+      </form>
 
-                    {/* Code unique */}
-                    <div>
-                        <input 
-                            type="text"
-                            name="codeUnique"
-                            value={form.codeUnique}
-                            onChange={handleChange}
-                            placeholder="Votre code"
-                            maxLength={10}
-                            className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500" 
-                        />
-                    </div>
-                    
-                    {/* Bouton de soumission */}
-                    <button 
-                        type="submit"
-                        className="w-full bg-green-700 hover:bg-green-800 text-white font-semibold py-2.5 rounded-lg transition-colors"
-                    >
-                        Valider
-                    </button>
-                </form>
+      {/* Overlay Félicitation */}
+      {gain && (
+        <div className="fixed inset-0 bg-black/60 flex flex-col items-center justify-between z-50 px-6 py-12">
+          <div className="w-full max-w-sm">
+            <h2 className="text-4xl font-bold italic font-serif text-white mb-1">Félicitation !</h2>
+            <p className="text-white/80 text-sm">Vous avez obtenu une récompense</p>
+          </div>
+
+          <div className="flex-1 flex items-center justify-center">
+            {/* Code saisi */}
+            <div className="bg-white/10 rounded-lg px-6 py-3 mb-6 text-white font-mono tracking-widest text-lg">
+              {code}
             </div>
+          </div>
+
+          {/* Icône décorative */}
+          <div className="mb-8">
+            <svg className="w-24 h-24 text-yellow-200" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
+            </svg>
+          </div>
+
+          <div className="w-full max-w-sm">
+            <p className="text-white text-center font-semibold mb-1">{gain.name}</p>
+            <p className="text-white/70 text-center text-sm mb-6">{gain.description}</p>
+            <button
+              onClick={() => navigate('/mes-gains')}
+              className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
+            >
+              Découvrir mon lot
+            </button>
+          </div>
         </div>
-    )
-}
+      )}
+    </div>
+  )
+}