@consilioweb/payload-support 0.5.1

package/src/portal/login/page.tsx

@@ -0,0 +1,351 @@
+'use client'
+
+import React, { useState, useEffect, Suspense } from 'react'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+export default function SupportLoginPage() {
+  return (
+    <Suspense>
+      <SupportLoginContent />
+    </Suspense>
+  )
+}
+
+function SupportLoginContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [email, setEmail] = useState('')
+  const [info, setInfo] = useState('')
+
+  // Pre-fill email from query param (e.g. redirect from register page)
+  useEffect(() => {
+    const emailParam = searchParams.get('email')
+    if (emailParam) {
+      setEmail(emailParam)
+      setInfo('Vous avez déjà un compte. Connectez-vous pour accéder à votre espace support.')
+    }
+  }, [searchParams])
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  // 2FA state
+  const [needs2FA, setNeeds2FA] = useState(false)
+  const [twoFactorCode, setTwoFactorCode] = useState('')
+  const [sending2FA, setSending2FA] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      const res = await fetch('/api/support/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ email, password }),
+      })
+
+      const data = await res.json()
+
+      if (!res.ok || data.errors) {
+        setError(data.errors?.[0]?.message || 'Email ou mot de passé incorrect.')
+        return
+      }
+
+      // Check if 2FA is enabled for this user
+      if (data.user?.twoFactorEnabled) {
+        // Logout immediately (we need 2FA first)
+        await fetch('/api/support-clients/logout', {
+          method: 'POST',
+          credentials: 'include',
+        })
+
+        // Send 2FA code
+        setSending2FA(true)
+        const codeRes = await fetch('/api/support/2fa', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'send', email }),
+        })
+
+        if (codeRes.ok) {
+          setNeeds2FA(true)
+        } else {
+          setError('Erreur lors de l\'envoi du code de vérification.')
+        }
+        setSending2FA(false)
+        return
+      }
+
+      router.push('/support/dashboard')
+    } catch {
+      setError('Erreur de connexion. Veuillez réessayer.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleVerify2FA = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      // Verify the 2FA code
+      const verifyRes = await fetch('/api/support/2fa', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'verify', email, code: twoFactorCode }),
+      })
+
+      const verifyData = await verifyRes.json()
+
+      if (!verifyRes.ok || !verifyData.verified) {
+        setError(verifyData.error || 'Code incorrect.')
+        return
+      }
+
+      // Re-login now that 2FA is verified
+      const loginRes = await fetch('/api/support-clients/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ email, password }),
+      })
+
+      if (loginRes.ok) {
+        router.push('/support/dashboard')
+      } else {
+        setError('Erreur de connexion après vérification.')
+      }
+    } catch {
+      setError('Erreur de connexion.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleResend2FA = async () => {
+    setSending2FA(true)
+    setError('')
+    try {
+      const res = await fetch('/api/support/2fa', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'send', email }),
+      })
+      if (res.ok) {
+        setError('')
+      } else {
+        setError('Erreur lors du renvoi du code.')
+      }
+    } catch {
+      setError('Erreur de connexion.')
+    } finally {
+      setSending2FA(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4 py-12 bg-gradient-to-br from-slate-50 via-white to-blue-50 dark:from-slate-950 dark:via-slate-950 dark:to-blue-950/20">
+      {/* Decorative background element */}
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(37,99,235,0.08),transparent)] dark:bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(37,99,235,0.12),transparent)]" />
+
+      <div className="relative w-full max-w-[420px]">
+        {/* Logo / Header */}
+        <div className="mb-8 text-center">
+          <Link href="/support" className="group mb-6 inline-flex items-center gap-2.5 transition-opacity hover:opacity-80">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white shadow-lg shadow-blue-600/25">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+            </div>
+            <span className="text-lg font-semibold text-slate-900 dark:text-white">Support</span>
+          </Link>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
+            Connexion à votre espace
+          </h1>
+          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            Portail client — Support et suivi de projets
+          </p>
+        </div>
+
+        {needs2FA ? (
+          /* 2FA Verification Form */
+          <form
+            onSubmit={handleVerify2FA}
+            className="rounded-2xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none"
+          >
+            <div className="mb-6 text-center">
+              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-7 w-7">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+              </div>
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Verification en deux étapes</h2>
+              <p className="mt-1.5 text-sm text-slate-500 dark:text-slate-400">
+                Un code à ete envoye à <strong className="font-medium text-slate-700 dark:text-slate-300">{email}</strong>
+              </p>
+            </div>
+
+            {error && (
+              <div className="mb-5 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/50 dark:text-red-400">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="mt-0.5 h-4 w-4 shrink-0">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+                </svg>
+                {error}
+              </div>
+            )}
+
+            <div className="mb-6">
+              <label htmlFor="code" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                Code de verification
+              </label>
+              <input
+                id="code"
+                type="text"
+                required
+                maxLength={6}
+                value={twoFactorCode}
+                onChange={(e) => setTwoFactorCode(e.target.value.replace(/\D/g, ''))}
+                placeholder="000000"
+                className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-center text-2xl font-semibold tracking-[0.4em] text-slate-900 outline-none transition-all placeholder:text-slate-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 dark:border-slate-600 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20"
+                autoFocus
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading || twoFactorCode.length !== 6}
+              className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-blue-600/25 transition-all hover:bg-blue-700 hover:shadow-xl active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+            >
+              {loading ? 'Verification...' : 'Verifier'}
+            </button>
+
+            <div className="mt-5 flex items-center justify-between text-sm">
+              <button
+                type="button"
+                onClick={handleResend2FA}
+                disabled={sending2FA}
+                className="font-medium text-blue-600 transition-colors hover:text-blue-700 disabled:opacity-50 dark:text-blue-400 dark:hover:text-blue-300"
+              >
+                {sending2FA ? 'Envoi...' : 'Renvoyer le code'}
+              </button>
+              <button
+                type="button"
+                onClick={() => { setNeeds2FA(false); setTwoFactorCode(''); setError('') }}
+                className="font-medium text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+              >
+                Retour
+              </button>
+            </div>
+          </form>
+        ) : (
+          /* Login Form */
+          <form
+            onSubmit={handleSubmit}
+            className="rounded-2xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none"
+          >
+            {info && (
+              <div className="mb-6 flex items-start gap-3 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-700 dark:border-blue-800/50 dark:bg-blue-950/50 dark:text-blue-400">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="mt-0.5 h-4 w-4 shrink-0">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
+                </svg>
+                {info}
+              </div>
+            )}
+
+            {error && (
+              <div className="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/50 dark:text-red-400">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="mt-0.5 h-4 w-4 shrink-0">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+                </svg>
+                {error}
+              </div>
+            )}
+
+            <div className="mb-5">
+              <label htmlFor="email" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="vous@entreprise.fr"
+                className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 dark:border-slate-600 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-blue-500 dark:focus:ring-blue-500/20"
+              />
+            </div>
+
+            <div className="mb-6">
+              <label htmlFor="password" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                Mot de passe
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 dark:border-slate-600 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-blue-500 dark:focus:ring-blue-500/20"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading || sending2FA}
+              className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-blue-600/25 transition-all hover:bg-blue-700 hover:shadow-xl active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+            >
+              {loading || sending2FA ? 'Connexion...' : 'Se connecter'}
+            </button>
+
+            {/* Google SSO divider */}
+            <div className="my-6 flex items-center gap-3">
+              <div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
+              <span className="text-xs font-medium text-slate-400 dark:text-slate-500">OU</span>
+              <div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
+            </div>
+
+            {/* Google SSO button — intentionally <a> not <Link>, this is an API redirect route */}
+            {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+            <a
+              href="/api/support/oauth/google?action=login"
+              className="flex w-full items-center justify-center gap-3 rounded-xl border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition-all hover:bg-slate-50 hover:shadow-md active:scale-[0.98] dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
+            >
+              <svg className="h-5 w-5" viewBox="0 0 24 24">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A11.96 11.96 0 0 0 1 12c0 1.94.46 3.77 1.18 5.07l3.66-2.84z" fill="#FBBC05" />
+                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+              </svg>
+              Continuer avec Google
+            </a>
+          </form>
+        )}
+
+        <div className="mt-6 flex items-center justify-between text-sm">
+          <Link href="/support/forgot-password" className="font-medium text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
+            Mot de passé oublié ?
+          </Link>
+          <a href={process.env.NEXT_PUBLIC_SERVER_URL || '/'} className="font-medium text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
+            &larr; Retour au site
+          </a>
+        </div>
+
+        <p className="mt-5 text-center text-sm text-slate-500 dark:text-slate-400">
+          Pas encore de compte ?{' '}
+          <Link href="/support/register" className="font-medium text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
+            Créer un compte
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/portal/page.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import Link from 'next/link'
+
+const serverUrl = process.env.NEXT_PUBLIC_SERVER_URL || ''
+const supportEmail = process.env.SUPPORT_EMAIL || 'support@example.com'
+
+export default function SupportPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-white dark:bg-slate-950">
+      {/* Header */}
+      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-950/80">
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+          <Link href="/" className="flex items-center gap-3 transition-opacity hover:opacity-80">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-600 text-white">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+            </div>
+            <span className="text-lg font-semibold text-slate-900 dark:text-white">Support</span>
+          </Link>
+          <Link
+            href="/support/login"
+            className="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md active:scale-[0.98]"
+          >
+            Se connecter
+          </Link>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <main className="flex-1">
+        <section className="relative overflow-hidden">
+          {/* Subtle gradient background */}
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-slate-900 dark:via-slate-950 dark:to-blue-950/30" />
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(37,99,235,0.12),transparent)] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(37,99,235,0.15),transparent)]" />
+
+          <div className="relative mx-auto max-w-5xl px-6 py-20 sm:py-28 lg:py-32 text-center">
+            <div className="mx-auto mb-6 inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-300">
+              <span className="h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse" />
+              Assistance disponible
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl dark:text-white">
+              Espace Support Client
+            </h1>
+            <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-600 sm:text-xl dark:text-slate-400">
+              Suivez vos projets, signalez un problème ou posez une question.
+              Notre équipe vous repond sous 24h.
+            </p>
+            <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+              <Link
+                href="/support/login"
+                className="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-8 py-3.5 text-base font-medium text-white shadow-lg shadow-blue-600/25 transition-all hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-600/30 active:scale-[0.98] dark:shadow-blue-600/20"
+              >
+                Accéder à mon espace
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+                  <path fillRule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clipRule="evenodd" />
+                </svg>
+              </Link>
+              <Link
+                href="/support/register"
+                className="inline-flex items-center rounded-xl border border-slate-300 bg-white px-8 py-3.5 text-base font-medium text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:shadow-md active:scale-[0.98] dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+              >
+                Créer un compte
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        {/* Features */}
+        <section className="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/50">
+          <div className="mx-auto max-w-5xl px-6 py-20 sm:py-24">
+            <div className="mb-4 text-center">
+              <p className="text-sm font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400">Simple et efficace</p>
+            </div>
+            <h2 className="mb-4 text-center text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
+              Comment ça fonctionne ?
+            </h2>
+            <p className="mx-auto mb-14 max-w-xl text-center text-slate-500 dark:text-slate-400">
+              Trois étapes pour obtenir de l&apos;aide rapidement.
+            </p>
+            <div className="grid gap-8 sm:grid-cols-3">
+              {/* Card 1 */}
+              <div className="group rounded-2xl border border-slate-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-0.5 dark:border-slate-700 dark:bg-slate-800">
+                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-950 dark:text-blue-400 dark:group-hover:bg-blue-600 dark:group-hover:text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6">
+                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                    <polyline points="14 2 14 8 20 8" />
+                    <line x1="16" y1="13" x2="8" y2="13" />
+                    <line x1="16" y1="17" x2="8" y2="17" />
+                  </svg>
+                </div>
+                <h3 className="mb-2 text-lg font-semibold text-slate-900 dark:text-white">Créez un ticket</h3>
+                <p className="text-sm leading-relaxed text-slate-500 dark:text-slate-400">
+                  Décrivez votre besoin ou problème. Ajoutez une catégorie et une priorité pour un traitement rapide.
+                </p>
+              </div>
+
+              {/* Card 2 */}
+              <div className="group rounded-2xl border border-slate-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-0.5 dark:border-slate-700 dark:bg-slate-800">
+                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-950 dark:text-blue-400 dark:group-hover:bg-blue-600 dark:group-hover:text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                  </svg>
+                </div>
+                <h3 className="mb-2 text-lg font-semibold text-slate-900 dark:text-white">Échangez avec nous</h3>
+                <p className="text-sm leading-relaxed text-slate-500 dark:text-slate-400">
+                  Discutez directement avec notre équipe. Chaque message est suivi et archive dans votre espace.
+                </p>
+              </div>
+
+              {/* Card 3 */}
+              <div className="group rounded-2xl border border-slate-200 bg-white p-8 shadow-sm transition-all hover:shadow-lg hover:-translate-y-0.5 dark:border-slate-700 dark:bg-slate-800">
+                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-950 dark:text-blue-400 dark:group-hover:bg-blue-600 dark:group-hover:text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6">
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                  </svg>
+                </div>
+                <h3 className="mb-2 text-lg font-semibold text-slate-900 dark:text-white">Suivez l&apos;avancement</h3>
+                <p className="text-sm leading-relaxed text-slate-500 dark:text-slate-400">
+                  Consultez le statut de vos tickets, le temps passé et l&apos;historique complet de vos projets.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Email alternative */}
+        <section className="border-t border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
+          <div className="mx-auto max-w-5xl px-6 py-20 text-center">
+            <h2 className="mb-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
+              Pas encore de compte ?
+            </h2>
+            <p className="mx-auto mb-8 max-w-xl text-base text-slate-500 dark:text-slate-400">
+              Créez votre compte en quelques secondes pour acceder à votre espace support, ou envoyez un email a{' '}
+              <strong className="font-medium text-slate-700 dark:text-slate-300">{supportEmail}</strong>{' '}
+              pour une creation automatique.
+            </p>
+            <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+              <Link
+                href="/support/register"
+                className="inline-flex items-center rounded-xl bg-blue-600 px-8 py-3.5 text-base font-medium text-white shadow-lg shadow-blue-600/25 transition-all hover:bg-blue-700 hover:shadow-xl active:scale-[0.98]"
+              >
+                Créer un compte
+              </Link>
+              <a
+                href={`mailto:${supportEmail}`}
+                className="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-8 py-3.5 text-base font-medium text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:shadow-md active:scale-[0.98] dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5 text-slate-400">
+                  <path d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z" />
+                  <path d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z" />
+                </svg>
+                {supportEmail}
+              </a>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}