feat(v11-i): footer CTA infolettre + endpoint /api/subscribe Kit V4

2026-05-11 15:04:58 +02:00
parent 5589678abc
commit beb8e9a0bd
4 changed files with 146 additions and 0 deletions
--- a/src/components/astro/Footer.astro
+++ b/src/components/astro/Footer.astro
@@ -0,0 +1,70 @@
+---
+// Footer.astro - CTA infolettre Kit + nav footer
+---
+<footer class="border-t border-neutral-200 px-6 py-8 text-sm bg-white">
+  <div class="max-w-3xl mx-auto">
+    <h3 class="font-semibold mb-1" style="font-family: 'Courier New', Courier, monospace;">
+      S'abonner a la lettre
+    </h3>
+    <p class="text-neutral-600 text-xs mb-3">
+      1-2 emails par mois - pas de spam - desinscription en 1 clic.
+    </p>
+    <form id="subscribe-form" class="flex gap-2 max-w-md">
+      <input
+        type="email"
+        name="email"
+        required
+        placeholder="ton@email.fr"
+        class="flex-1 px-3 py-2 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-neutral-900"
+      />
+      <button
+        type="submit"
+        class="px-4 py-2 bg-neutral-900 text-white rounded-lg text-sm hover:bg-neutral-700 transition-colors"
+      >
+        s'abonner
+      </button>
+    </form>
+    <p id="subscribe-msg" class="mt-2 text-xs text-neutral-500 min-h-[1rem]"></p>
+    <nav class="mt-6 flex flex-wrap gap-4 text-xs text-neutral-500">
+      <a href="/manifeste" class="hover:text-neutral-900">Manifeste</a>
+      <a href="/a-propos" class="hover:text-neutral-900">A propos</a>
+      <a href="/mentions-legales" class="hover:text-neutral-900">Mentions legales</a>
+      <a href="https://www.instagram.com/aep.politique/" target="_blank" rel="noopener" class="hover:text-neutral-900">@aep.politique</a>
+    </nav>
+  </div>
+</footer>
+
+<script>
+  const form = document.getElementById('subscribe-form') as HTMLFormElement | null;
+  const msg = document.getElementById('subscribe-msg') as HTMLParagraphElement | null;
+
+  form?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (!msg || !form) return;
+
+    const emailInput = form.elements.namedItem('email') as HTMLInputElement;
+    const email = emailInput?.value?.trim() ?? '';
+    if (!email) return;
+
+    msg.textContent = 'envoi...';
+
+    try {
+      const r = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      const data = await r.json();
+      if (data.ok) {
+        msg.textContent = data.already
+          ? 'tu es deja abonne - a tres vite.'
+          : 'merci ! check ta boite mail (parfois spam).';
+        form.reset();
+      } else {
+        msg.textContent = `souci : ${data.error || 'reessaie plus tard'}`;
+      }
+    } catch {
+      msg.textContent = 'erreur reseau - reessaie plus tard';
+    }
+  });
+</script>