Ajouter la page concept, améliorer la bannière, ajouter pages contact et concept au menu et ajouter la condition d'inscription pour plus de 18 ans

frontend/src/pages/Profile.jsx

@@ -1,13 +1,25 @@
-import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useState, useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
 import UserNav from '../components/UserNav'
-import { changePasswordApi, deleteAccountApi, meApi, forgotPasswordApi } from '../services/auth'
+import { changePasswordApi, meApi, forgotPasswordApi } from '../services/auth'
 import { useHandleAuthError } from '../hooks/useHandleAuthError'
 
 export default function Profile() {
   const user = JSON.parse(localStorage.getItem('user') || '{}')
   const initials = `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
   const handleAuthError = useHandleAuthError()
+  const { hash } = useLocation()
+
+  const deleteSectionRef = useRef(null)
+
+  // Permet à un lien externe (ex. les CGU) de renvoyer directement sur cette
+  // section via /profile#suppression-compte, plutôt que d'obliger l'utilisateur
+  // à chercher l'information au milieu de la page.
+  useEffect(() => {
+    if (hash === '#suppression-compte') {
+      deleteSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }, [hash])
 
   const [pwForm, setPwForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' })
   const [showPw, setShowPw] = useState({ current: false, new: false, confirm: false })
@@ -82,7 +94,7 @@ export default function Profile() {
   )
 
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col px-8 py-12 max-w-lg mx-auto">
+    <div className="min-h-screen bg-gray-50 flex flex-col px-8 py-12 max-w-xl mx-auto">
       <UserNav active="profile" />
 
       {/* Avatar */}
@@ -206,6 +218,30 @@ export default function Profile() {
         </form>
         )}
       </div>
+
+      {/* Séparateur */}
+      <div className="border-t border-gray-100 my-6" />
+
+      {/* Section suppression du compte */}
+      <div ref={deleteSectionRef} id="suppression-compte">
+        <h2 className="text-sm font-semibold text-gray-800 mb-4">Supprimer mon compte</h2>
+
+        <div className="px-4 py-4 rounded-lg bg-gray-50 border border-gray-200">
+          <p className="text-sm text-gray-600">
+            Pour des raisons de sécurité, la suppression de compte n&apos;est pas disponible en
+            libre-service. Envoyez-nous un email depuis votre adresse enregistrée
+            ({user.email || '—'}) et notre équipe supprimera votre compte, vos participations et
+            vos gains non retirés.
+          </p>
+
+          <a
+            href="mailto:thetiptop.gp4@gmail.com?subject=Suppression%20de%20mon%20compte"
+            className="mt-3 inline-flex items-center justify-center bg-[#006B6B] hover:bg-[#005959] text-white font-medium px-4 py-2.5 rounded-lg transition-colors text-sm"
+          >
+            Demander la suppression par email
+          </a>
+        </div>
+      </div>
     </div>
   )
 }