From 5d82984d7ddb830a6c5f6e383dc5552e68e19ed4 Mon Sep 17 00:00:00 2001
From: tbeaumont79 <tbeaumont79@icloud.com>
Date: Wed, 10 Jun 2026 19:32:05 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20landing=20full-bleed=20+=20formulai?=
 =?UTF-8?q?re=20magic-link=20r=C3=A9ellement=20branch=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Landing : les fonds de sections occupent désormais toute la largeur de
l'écran (le layout ne contraint plus <main> ; chaque page app pose son
propre conteneur mx-auto max-w-6xl px-6 py-10). Conteneurs internes de la
landing élargis (max-w-7xl), footer dupliqué supprimé (celui du layout
fait foi), <main> imbriqué corrigé (page → div).

MagicLinkForm : le formulaire de la landing affichait « lien envoyé »
sans jamais rien envoyer (prop onSubmit jamais branchée). Il appelle
désormais useAuth().signIn par défaut — un vrai magic-link part du hero
et du CTA final.

Connexion : encart dev-only expliquant que sans SMTP le lien s'affiche
dans le terminal du serveur (évite de chercher un email qui n'arrive pas).

Vérifié sur build de prod : fonds bord à bord, formulaire landing → lien
loggé serveur, écran « C'est envoyé ». Lint, typecheck, 56 tests OK.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/app/components/landing/MagicLinkForm.vue | 17 ++++++---
 apps/app/layouts/default.vue                  |  7 +++-
 apps/app/pages/connexion.vue                  | 13 +++++++
 apps/app/pages/cv/demo.vue                    |  3 +-
 apps/app/pages/index.vue                      | 37 +++++--------------
 apps/app/pages/profil.vue                     |  2 +-
 apps/app/pages/ui.vue                         |  2 +-
 7 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/apps/app/components/landing/MagicLinkForm.vue b/apps/app/components/landing/MagicLinkForm.vue
index 12358b0..413fcb3 100644
--- a/apps/app/components/landing/MagicLinkForm.vue
+++ b/apps/app/components/landing/MagicLinkForm.vue
@@ -10,16 +10,16 @@ import { useLanding } from '~/composables/useLanding'
  * Monté plusieurs fois sur la landing (hero + CTA final) : les ids champ/erreur
  * sont générés via useId() pour rester uniques dans le DOM (a11y).
  *
- * Périmètre de CETTE issue = l'UI du flux. L'envoi réel du lien (génération de
- * token + e-mail) relève du WS auth/magic-link : on l'appelle via la prop
- * `onSubmit`, à brancher sur l'endpoint quand il existera. Par défaut le flux
- * affiche l'écran de confirmation sans prétendre avoir envoyé un e-mail.
+ * L'envoi réel passe par useAuth().signIn (Better Auth magic-link). La prop
+ * `onSubmit` reste disponible pour surcharger le comportement (tests, variantes).
  */
 const props = defineProps<{
-  /** Brancher l'envoi réel du lien ici (WS auth). */
+  /** Surcharge de l'envoi (défaut : useAuth().signIn). */
   onSubmit?: (email: string) => Promise<void>
 }>()
 
+const { signIn } = useAuth()
+
 const { m } = useLanding()
 
 const uid = useId()
@@ -43,7 +43,12 @@ async function submit() {
   }
   status.value = 'pending'
   try {
-    await props.onSubmit?.(value)
+    if (props.onSubmit) {
+      await props.onSubmit(value)
+    } else {
+      const ok = await signIn(value)
+      if (!ok) throw new Error('signIn failed')
+    }
     status.value = 'sent'
   } catch {
     status.value = 'idle'
diff --git a/apps/app/layouts/default.vue b/apps/app/layouts/default.vue
index 4da8f7a..f9d5f37 100644
--- a/apps/app/layouts/default.vue
+++ b/apps/app/layouts/default.vue
@@ -188,7 +188,12 @@ const year = new Date().getFullYear()
       </div>
     </header>
 
-    <main class="mx-auto w-full max-w-6xl flex-1 px-6 py-10">
+    <!--
+      Pas de conteneur ici : chaque page gère sa largeur. La landing pose des
+      sections full-bleed (fonds bord à bord) ; les pages app se wrappent dans
+      mx-auto max-w-6xl px-6 py-10.
+    -->
+    <main class="flex-1">
       <slot />
     </main>
 
diff --git a/apps/app/pages/connexion.vue b/apps/app/pages/connexion.vue
index 48593cb..8251367 100644
--- a/apps/app/pages/connexion.vue
+++ b/apps/app/pages/connexion.vue
@@ -10,6 +10,10 @@ const toast = useToast()
 const email = ref('')
 const sent = ref(false)
 
+// En dev sans SMTP, l'email n'est jamais envoyé : le lien magique est loggé
+// dans le terminal du serveur. On l'affiche pour ne pas chercher en vain.
+const isDev = import.meta.dev
+
 async function handleSubmit() {
   if (!email.value) return
   const ok = await signIn(email.value)
@@ -88,6 +92,15 @@ function changeEmail() {
           </p>
         </div>
 
+        <p
+          v-if="isDev"
+          class="rounded-control bg-warning-50 px-3 py-2 text-left text-xs leading-relaxed text-warning-700 ring-1 ring-warning-200"
+        >
+          Mode dev sans SMTP : aucun email n'est réellement envoyé. Le lien de connexion est affiché
+          dans le <strong>terminal du serveur</strong> (<code>[DEV] Magic-link…</code>) — copie-le
+          dans le navigateur.
+        </p>
+
         <div class="flex flex-col items-center gap-2">
           <UiButton variant="ghost" size="sm" :loading="pending" @click="handleResend">
             Renvoyer le lien
diff --git a/apps/app/pages/cv/demo.vue b/apps/app/pages/cv/demo.vue
index 10f2500..e6d5fc9 100644
--- a/apps/app/pages/cv/demo.vue
+++ b/apps/app/pages/cv/demo.vue
@@ -127,13 +127,14 @@ async function handleExport() {
 </script>
 
 <template>
+  <!-- Fond atelier bord à bord ; le contenu garde sa largeur de lecture. -->
   <div class="bg-surface-muted print:bg-white">
     <!--
       Aperçu type "feuille + inspecteur" : la feuille A4 occupe l'espace à gauche,
       le panneau d'actions est au-dessus sur mobile, à droite (sticky) sur desktop.
     -->
     <div
-      class="flex flex-col gap-8 lg:flex-row-reverse lg:items-start lg:justify-center print:block"
+      class="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-10 lg:flex-row-reverse lg:items-start lg:justify-center print:block print:max-w-none print:p-0"
     >
       <!-- Panneau d'actions — chrome d'aperçu, masqué à l'impression. -->
       <aside class="w-full shrink-0 lg:sticky lg:top-24 lg:w-72 print:hidden">
diff --git a/apps/app/pages/index.vue b/apps/app/pages/index.vue
index f43baf1..04f7d8e 100644
--- a/apps/app/pages/index.vue
+++ b/apps/app/pages/index.vue
@@ -71,7 +71,8 @@ function toggleFaq(index: number) {
 </script>
 
 <template>
-  <main id="top" class="min-h-full bg-surface text-ink-900">
+  <!-- div (pas <main>) : le layout fournit déjà le <main> englobant. -->
+  <div id="top" class="min-h-full bg-surface text-ink-900">
     <!-- Le header global (nav + connexion) vient du layout par défaut. -->
 
     <!-- Hero -->
@@ -81,7 +82,7 @@ function toggleFaq(index: number) {
         aria-hidden="true"
       ></div>
       <div
-        class="mx-auto grid max-w-6xl items-center gap-14 px-6 pb-24 pt-12 lg:grid-cols-2 lg:gap-16 lg:pb-28 lg:pt-20"
+        class="mx-auto grid max-w-7xl items-center gap-14 px-6 pb-24 pt-16 lg:grid-cols-2 lg:gap-20 lg:pb-32 lg:pt-24"
       >
         <div class="relative">
           <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
@@ -119,7 +120,7 @@ function toggleFaq(index: number) {
 
     <!-- Comment ça marche -->
     <section class="px-6 py-20 sm:py-24">
-      <div class="mx-auto max-w-6xl">
+      <div class="mx-auto max-w-7xl">
         <div class="mx-auto max-w-2xl text-center">
           <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
             {{ m.how.eyebrow }}
@@ -156,7 +157,7 @@ function toggleFaq(index: number) {
 
     <!-- Garde-fou (différenciateur cœur) -->
     <section class="bg-ink-900 px-6 py-20 text-white sm:py-24">
-      <div class="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
+      <div class="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
         <div>
           <span
             class="inline-flex h-12 w-12 items-center justify-center rounded-control bg-white/10"
@@ -193,7 +194,7 @@ function toggleFaq(index: number) {
 
     <!-- Pour qui -->
     <section class="px-6 py-20 sm:py-24">
-      <div class="mx-auto max-w-6xl">
+      <div class="mx-auto max-w-7xl">
         <div class="mx-auto max-w-2xl text-center">
           <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
             {{ m.audience.eyebrow }}
@@ -225,7 +226,7 @@ function toggleFaq(index: number) {
 
     <!-- Pricing : crédits one-shot, pas d'abonnement -->
     <section id="tarifs" class="bg-surface-muted px-6 py-20 sm:py-24">
-      <div class="mx-auto max-w-6xl">
+      <div class="mx-auto max-w-7xl">
         <div class="mx-auto max-w-2xl text-center">
           <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
             {{ m.pricing.eyebrow }}
@@ -234,7 +235,7 @@ function toggleFaq(index: number) {
           <p class="mt-6 leading-relaxed text-ink-600">{{ m.pricing.intro }}</p>
         </div>
 
-        <div class="mx-auto mt-14 grid max-w-5xl gap-6 md:grid-cols-3">
+        <div class="mx-auto mt-14 grid max-w-6xl gap-6 md:grid-cols-3">
           <!-- Carte « Gratuit » (2 générations offertes à l'inscription) -->
           <article class="flex flex-col rounded-card bg-surface p-7 shadow-xs ring-1 ring-border">
             <h3 class="text-lg font-semibold text-ink-900">{{ m.pricing.free.name }}</h3>
@@ -382,24 +383,6 @@ function toggleFaq(index: number) {
         <p class="mt-4 text-sm text-white/80">{{ m.finalCta.trust }}</p>
       </div>
     </section>
-
-    <!-- Footer -->
-    <footer class="border-t border-border bg-surface px-6 py-10">
-      <div
-        class="mx-auto flex max-w-6xl flex-col items-center gap-4 sm:flex-row sm:justify-between"
-      >
-        <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-ink-600">
-          <a
-            v-for="(l, i) in m.footer.links"
-            :key="i"
-            :href="l.href"
-            class="transition-colors duration-300 ease-out hover:text-brand-600"
-          >
-            {{ l.label }}
-          </a>
-        </nav>
-        <p class="text-sm text-ink-500">{{ m.footer.copyright }}</p>
-      </div>
-    </footer>
-  </main>
+    <!-- Le footer global vient du layout par défaut (plus de footer dupliqué ici). -->
+  </div>
 </template>
diff --git a/apps/app/pages/profil.vue b/apps/app/pages/profil.vue
index a95f5a5..5d12af3 100644
--- a/apps/app/pages/profil.vue
+++ b/apps/app/pages/profil.vue
@@ -281,7 +281,7 @@ async function applyImport() {
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="mx-auto w-full max-w-6xl px-6 py-10">
     <!-- ── En-tête de page ── -->
     <header>
       <h1 class="text-2xl font-bold tracking-tight text-ink-900 sm:text-3xl">Mon profil</h1>
diff --git a/apps/app/pages/ui.vue b/apps/app/pages/ui.vue
index 09b1689..00d7087 100644
--- a/apps/app/pages/ui.vue
+++ b/apps/app/pages/ui.vue
@@ -144,7 +144,7 @@ const SEMANTIC_SCALES = [
 </script>
 
 <template>
-  <div>
+  <div class="mx-auto w-full max-w-6xl px-6 py-10">
     <header class="mb-8">
       <h1 class="text-2xl font-bold tracking-tight text-ink-900">Design system</h1>
       <p class="mt-1 text-ink-500">