feat(landing): Add newsletter double-opt-in

2026-01-14 17:37:00 +01:00
parent d8b7e193a9
commit 7a5b666032
5 changed files with 258 additions and 24 deletions
--- a/landing/app/pages/newsletter-bestaetigt.vue
+++ b/landing/app/pages/newsletter-bestaetigt.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="min-h-screen pt-24 pb-16 flex items-center">
+    <!-- Background with gradient -->
+    <div class="fixed inset-0 -z-10">
+      <div
+        class="absolute inset-0 bg-linear-to-br from-primary-50 via-cyan-50 to-accent-50 dark:from-gray-950 dark:via-primary-950/30 dark:to-accent-950/30"
+      />
+      <!-- Gradient orbs -->
+      <div class="absolute top-20 left-1/4 w-96 h-96 bg-primary-400/20 rounded-full blur-3xl animate-orb-float" />
+      <div
+        class="absolute bottom-20 right-1/4 w-80 h-80 bg-accent-400/20 rounded-full blur-3xl animate-orb-float"
+        style="animation-delay: 3s"
+      />
+    </div>
+
+    <div class="relative max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <!-- Success card -->
+      <div class="glass rounded-3xl p-10 sm:p-14 shadow-2xl animate-fade-in-up">
+        <!-- Checkmark icon with animation -->
+        <div class="relative mb-8">
+          <div
+            class="w-24 h-24 mx-auto rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center animate-scale-in"
+          >
+            <UIcon name="i-lucide-check-circle" class="w-14 h-14 text-success-600 dark:text-success-400" />
+          </div>
+          <!-- Decorative rings -->
+          <div
+            class="absolute inset-0 w-24 h-24 mx-auto rounded-full border-2 border-success-400/30 animate-ping-slow"
+          />
+        </div>
+
+        <!-- Title -->
+        <h1
+          class="font-heading text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4 animate-fade-in-up"
+          style="animation-delay: 200ms"
+        >
+          {{ $t('newsletterConfirmed.title') }}
+        </h1>
+
+        <!-- Description -->
+        <p
+          class="text-lg text-gray-600 dark:text-gray-300 mb-8 animate-fade-in-up"
+          style="animation-delay: 300ms"
+        >
+          {{ $t('newsletterConfirmed.description') }}
+        </p>
+
+        <!-- CTA Button -->
+        <div class="animate-fade-in-up" style="animation-delay: 400ms">
+          <UButton
+            to="/"
+            size="xl"
+            class="btn-gradient rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
+          >
+            <UIcon name="i-lucide-home" class="w-5 h-5 mr-2" />
+            {{ $t('newsletterConfirmed.backToHome') }}
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Trust indicators -->
+      <div class="mt-8 flex flex-wrap justify-center gap-6 animate-fade-in-up" style="animation-delay: 500ms">
+        <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+          <div class="w-6 h-6 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
+            <UIcon name="i-lucide-shield-check" class="w-3.5 h-3.5 text-success-600 dark:text-success-400" />
+          </div>
+          <span>{{ $t('newsletter.trust.gdpr') }}</span>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+          <div class="w-6 h-6 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
+            <UIcon name="i-lucide-bell-off" class="w-3.5 h-3.5 text-success-600 dark:text-success-400" />
+          </div>
+          <span>{{ $t('newsletter.trust.noSpam') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t, locale } = useI18n()
+
+// SEO Meta
+useSeoMeta({
+  title: () => t('newsletterConfirmed.meta.title'),
+  description: () => t('newsletterConfirmed.meta.description'),
+  ogTitle: () => t('newsletterConfirmed.meta.title'),
+  ogDescription: () => t('newsletterConfirmed.meta.description'),
+  ogImage: '/og-image.png',
+  ogType: 'website',
+  twitterCard: 'summary_large_image',
+  robots: 'noindex, nofollow'
+})
+
+// Set language
+useHead({
+  htmlAttrs: {
+    lang: () => locale.value
+  }
+})
+</script>
+
+<style scoped>
+/* Orb float animation */
+@keyframes orb-float {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-20px) scale(1.05);
+  }
+}
+
+.animate-orb-float {
+  animation: orb-float 8s ease-in-out infinite;
+}
+
+/* Fade in up animation */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+/* Scale in animation for checkmark */
+@keyframes scale-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-scale-in {
+  animation: scale-in 0.5s ease-out forwards;
+}
+
+/* Slow ping animation for decorative ring */
+@keyframes ping-slow {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+.animate-ping-slow {
+  animation: ping-slow 2s ease-out infinite;
+}
+</style>
--- a/landing/i18n/locales/de.json
+++ b/landing/i18n/locales/de.json
@@ -289,8 +289,8 @@
    "description": "Erhalten Sie Updates zur Entwicklung der Web-App für die IT-Mitbestimmung und seien Sie unter den Ersten, die vom Release oder neuen Funktionen erfahren.",
    "placeholder": "Ihre E-Mail-Adresse",
    "submit": "Anmelden",
-    "submitted": "Angemeldet!",
-    "success": "Vielen Dank! Wir halten Sie auf dem Laufenden.",
+    "submitted": "E-Mail gesendet!",
+    "success": "Bitte bestätigen Sie Ihr Abonnement über den Link in der E-Mail, die wir Ihnen soeben gesendet haben.",
    "privacyNote": "Mit der Anmeldung stimmen Sie unserer {link} zu. Wir versenden keinen Spam.",
    "privacyLink": "Datenschutzerklärung",
    "validation": {
@@ -303,6 +303,15 @@
      "noSpam": "Kein Spam"
    }
  },
+  "newsletterConfirmed": {
+    "meta": {
+      "title": "Newsletter bestätigt – GremiumHub",
+      "description": "Vielen Dank für die Bestätigung Ihres Newsletter-Abonnements."
+    },
+    "title": "Abonnement bestätigt!",
+    "description": "Vielen Dank! Sie sind jetzt für unseren Newsletter angemeldet und erhalten Updates zur Entwicklung von GremiumHub.",
+    "backToHome": "Zur Startseite"
+  },
  "expertAccess": {
    "badge": "Expertennetzwerk",
    "title": "Externer Sachverstand – Kooperation mit Spezialkanzlei für Betriebsräte",
--- a/landing/i18n/locales/en.json
+++ b/landing/i18n/locales/en.json
@@ -289,8 +289,8 @@
    "description": "Receive updates on the development of GremiumHub and be among the first to learn about new features.",
    "placeholder": "Your email address",
    "submit": "Subscribe",
-    "submitted": "Subscribed!",
-    "success": "Thank you! We'll keep you updated.",
+    "submitted": "Email sent!",
+    "success": "Please confirm your subscription via the link in the email we just sent you.",
    "privacyNote": "By subscribing, you agree to our {link}. We don't send spam.",
    "privacyLink": "Privacy Policy",
    "validation": {
@@ -303,6 +303,15 @@
      "noSpam": "No spam"
    }
  },
+  "newsletterConfirmed": {
+    "meta": {
+      "title": "Newsletter Confirmed – GremiumHub",
+      "description": "Thank you for confirming your newsletter subscription."
+    },
+    "title": "Subscription Confirmed!",
+    "description": "Thank you! You are now subscribed to our newsletter and will receive updates on the development of GremiumHub.",
+    "backToHome": "Back to Home"
+  },
  "expertAccess": {
    "badge": "Expert Network",
    "title": "External Expertise – Directly from the Process",
--- a/landing/nuxt.config.ts
+++ b/landing/nuxt.config.ts
@@ -11,7 +11,11 @@ export default defineNuxtConfig({
    brevoSenderEmail: 'NOT_SET',
    brevoSenderName: 'NOT_SET',
    brevoContactEmail: 'NOT_SET',
-    brevoNewsletterListId: 'NOT_SET'
+    brevoNewsletterListId: 'NOT_SET',
+    brevoDoiTemplateId: 'NOT_SET',
+    public: {
+      siteUrl: 'NOT_SET'
+    }
  },

  // Font configuration - Bricolage Grotesque for headings, DM Sans for body
--- a/landing/server/api/newsletter/subscribe.post.ts
+++ b/landing/server/api/newsletter/subscribe.post.ts
@@ -29,29 +29,71 @@ export default defineEventHandler(async (event) => {
    })
  }

+  // Check if DOI template ID is configured
+  if (!config.brevoDoiTemplateId) {
+    console.error('BREVO_DOI_TEMPLATE_ID is not configured')
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Newsletter service is not configured'
+    })
+  }
+
+  console.log('DOI_TEMPLATE_ID', config.brevoDoiTemplateId)
+
+  // Check if public site URL is configured (for DOI redirect)
+  if (!config.public.siteUrl) {
+    console.error('NUXT_PUBLIC_SITE_URL is not configured')
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Newsletter service is not configured'
+    })
+  }
+
+  // Check if newsletter list ID is configured
+  if (!config.brevoNewsletterListId) {
+    console.error('BREVO_NEWSLETTER_LIST_ID is not configured')
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Newsletter service is not configured'
+    })
+  }
+
+  const templateId = parseInt(config.brevoDoiTemplateId, 10)
+  if (isNaN(templateId)) {
+    console.error('BREVO_DOI_TEMPLATE_ID is not a valid number')
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Newsletter service is not configured'
+    })
+  }
+
+  const listId = parseInt(config.brevoNewsletterListId, 10)
+  if (isNaN(listId)) {
+    console.error('BREVO_NEWSLETTER_LIST_ID is not a valid number')
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Newsletter service is not configured'
+    })
+  }
+
+  // Build the redirection URL to the confirmation page
+  const redirectionUrl = `${config.public.siteUrl}/newsletter-bestaetigt`
+
  try {
-    // Build request body for Brevo Contacts API
-    const brevoBody: {
-      email: string
-      updateEnabled: boolean
-      listIds?: number[]
-    } = {
+    // Build request body for Brevo Double Opt-In API
+    const brevoBody = {
      email,
-      updateEnabled: true
+      templateId,
+      redirectionUrl,
+      includeListIds: [listId]
    }

-    // Add list ID if configured
-    if (config.brevoNewsletterListId) {
-      const listId = parseInt(config.brevoNewsletterListId, 10)
-      if (!isNaN(listId)) {
-        brevoBody.listIds = [listId]
-      }
-    }
+    console.log('Brevo DOI request body:', brevoBody)

-    const response = await $fetch('https://api.brevo.com/v3/contacts', {
+    await $fetch('https://api.brevo.com/v3/contacts/doubleOptinConfirmation', {
      method: 'POST',
      headers: {
-        'accept': 'application/json',
+        accept: 'application/json',
        'api-key': config.brevoApiKey,
        'content-type': 'application/json'
      },
@@ -59,18 +101,18 @@ export default defineEventHandler(async (event) => {
    })

    return {
-      success: true,
-      id: (response as { id?: number })?.id
+      success: true
    }
  } catch (error: unknown) {
    // Handle Brevo API errors
    const fetchError = error as { statusCode?: number; data?: { code?: string; message?: string } }

    // Contact already exists (duplicate_parameter error) - treat as success
+    // User will receive another confirmation email
    if (fetchError.data?.code === 'duplicate_parameter') {
      return {
        success: true,
-        message: 'Already subscribed'
+        message: 'Confirmation email sent'
      }
    }