implement blog subscription feature with modal and email handling

app/[locale]/blog/_components/BlogCTASection.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
-import Link from 'next/link';
+import { BlogSubFormModal } from '@/components/ui/BlogSubFormModal';
 
 type Props = {
-    locale: string;
     title: string;
     text: string;
     cta: string;
 };
 
-export function BlogCTASection({ locale, title, text, cta }: Props) {
+export function BlogCTASection({ title, text, cta }: Props) {
     const sectionRef = useRef<HTMLDivElement>(null);
+    const [modalOpen, setModalOpen] = useState(false);
 
     useEffect(() => {
         const section = sectionRef.current;
@@ -36,35 +36,42 @@ export function BlogCTASection({ locale, title, text, cta }: Props) {
     }, []);
 
     return (
-        <div ref={sectionRef} className="w-full flex justify-center items-center pt-24 md:pt-36">
+        <>
-            <div
+            <div ref={sectionRef} className="pt-24 md:pt-36 px-8 md:px-14 lg:px-20 max-w-275 mx-auto">
-                className="w-full max-w-2xl reveal flex flex-col items-start gap-8 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40 transition-all duration-300 cursor-default"
+                <div
-                style={{ transitionDelay: `120ms` }}
+                    className="w-full reveal flex flex-col items-start gap-8 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40 transition-all duration-300 cursor-default"
-            >
+                    style={{ transitionDelay: `120ms` }}
-                <div>
+                >
-                    <h3 className="font-serif text-brand-brown text-left leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
+                    <div>
-                        {title}
+                        <h3 className="font-serif text-brand-brown text-left leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
-                    </h3>
+                            {title}
-                    <p className="font-sans text-sm text-left text-brand-brown/60 leading-relaxed">
+                        </h3>
-                        {text}
+                        <p className="font-sans text-sm text-left text-brand-brown/60 leading-relaxed">
-                    </p>
+                            {text}
-                </div>
+                        </p>
+                    </div>
 
-                <div className="w-full flex flex-row justify-end">
+                    <div className="w-full flex flex-row justify-end">
-                    <Link href={`/${locale}/freelance`} className="group flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 hover:border-brand-brown transition-colors duration-200">
+                        <button
-                        {cta}
+                            onClick={() => setModalOpen(true)}
-                        <svg
+                            className="group flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 hover:border-brand-brown transition-colors duration-200 cursor-pointer"
-                            className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform duration-200"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
                         >
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            {cta}
-                        </svg>
+                            <svg
-                    </Link>
+                                className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform duration-200"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                aria-hidden="true"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            </svg>
+                        </button>
+                    </div>
                 </div>
             </div>
-        </div>
+
+            <BlogSubFormModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+        </>
     );
 }

app/[locale]/blog/page.tsx

@@ -3,7 +3,6 @@ import { BlogHero } from "@/app/[locale]/blog/_components/BlogHero";
 import { BlogCTASection } from "@/app/[locale]/blog/_components/BlogCTASection";
 import { ArticleList } from "@/app/[locale]/blog/[slug]/_components/ArticleList";
 import { getTranslations } from "next-intl/server";
-import { BlogSubFormController } from '@/components/ui/BlogSubFormController';
 
 type props = {
     params: Promise<{ locale: string }>;
@@ -16,12 +15,9 @@ export default async function BlogPage({ params }: props) {
 
     return (
         <main className="bg-brand-beige">
-            <BlogSubFormController />
-
             <BlogHero />
 
             <BlogCTASection
-                locale={locale}
                 title={t("title")}
                 text={t("text")}
                 cta={t("cta")}

app/actions/subscribeNewsletter.ts

@@ -0,0 +1,26 @@
+'use server';
+
+import { addContact } from '@/lib/mail';
+
+export type SubscribeState = { success: true } | { success: false; error: string } | null;
+
+export async function subscribeNewsletter(
+    _: SubscribeState,
+    formData: FormData,
+): Promise<SubscribeState> {
+    const email = (formData.get('email') as string)?.trim();
+
+    if (!email) return { success: false, error: "L'adresse email est requise." };
+
+    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRe.test(email)) {
+        return { success: false, error: 'Adresse email invalide.' };
+    }
+
+    try {
+        await addContact(email);
+        return { success: true };
+    } catch (err) {
+        return { success: false, error: 'Une erreur est survenue. Réessaie plus tard.' };
+    }
+}

components/ui/BlogSubFormModal.tsx

@@ -2,65 +2,47 @@
 
 import { useEffect, useRef, useState, useActionState } from 'react';
 import { createPortal } from 'react-dom';
-import { sendContactMail, type ContactFormState } from '@/app/actions/sendContactMail';
+import { subscribeNewsletter, type SubscribeState } from '@/app/actions/subscribeNewsletter';
 
 type Props = {
     isOpen: boolean;
     onClose: () => void;
 };
 
-type FieldProps = {
+function EmailField({ inputRef }: { inputRef: React.RefObject<HTMLInputElement | null> }) {
-    label: string;
-    name: string;
-    type?: string;
-    required?: boolean;
-    textarea?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement | null>;
-};
-
-function Field({ label, name, type = 'text', required, textarea, inputRef }: FieldProps) {
     const base =
         'w-full font-sans text-sm text-brand-brown bg-white/60 border border-brand-brown/12 rounded-lg px-4 py-3 placeholder:text-brand-brown/25 focus:outline-none focus:border-brand-brown/35 focus:bg-white/80 transition-colors duration-150';
 
     return (
         <div className="flex flex-col gap-1.5">
             <label className="font-sans text-[11px] uppercase tracking-[0.18em] text-brand-brown/45">
-                {label}
+                Email
             </label>
-            {textarea ? (
+            <input
-                <textarea
+                ref={inputRef}
-                    name={name}
+                name="email"
-                    required={required}
+                type="email"
-                    rows={5}
+                required
-                    className={`${base} resize-none`}
+                className={base}
-                />
+            />
-            ) : (
-                <input
-                    ref={inputRef as React.RefObject<HTMLInputElement>}
-                    name={name}
-                    type={type}
-                    required={required}
-                    className={base}
-                />
-            )}
         </div>
     );
 }
 
 export function BlogSubFormModal({ isOpen, onClose }: Props) {
     const [mounted, setMounted] = useState(false);
-    const [state, action, pending] = useActionState<ContactFormState, FormData>(
+    const [state, action, pending] = useActionState<SubscribeState, FormData>(
-        sendContactMail,
+        subscribeNewsletter,
         null,
     );
-    const firstInputRef = useRef<HTMLInputElement>(null);
+    const emailInputRef = useRef<HTMLInputElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
 
     useEffect(() => setMounted(true), []);
 
     useEffect(() => {
         if (isOpen) {
-            setTimeout(() => firstInputRef.current?.focus(), 50);
+            setTimeout(() => emailInputRef.current?.focus(), 50);
             document.body.style.overflow = 'hidden';
         } else {
             document.body.style.overflow = '';
@@ -83,23 +65,20 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
     return createPortal(
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true">
 
-            {/* Backdrop */}
             <div
                 className="absolute inset-0 bg-brand-brown/40 backdrop-blur-sm"
                 onClick={onClose}
             />
 
-            {/* Panel */}
             <div className="relative w-full max-w-lg bg-brand-beige rounded-2xl shadow-2xl flex flex-col gap-7 p-8 md:p-10">
 
-                {/* Header */}
                 <div className="flex items-start justify-between gap-4">
                     <div>
                         <h2 className="font-serif text-brand-brown text-[clamp(1.3rem,2vw,1.65rem)] leading-tight">
-                            Abonnez-vous au blog
+                            Ne ratez aucun article
                         </h2>
                         <p className="font-sans text-sm text-brand-brown/45 mt-1.5">
-                            Recevez une alerte par mail quand un nouvel article est publie. C'est gratuit.
+                            Un mail à chaque nouvel article. Pas de spam, désabonnement en un clic.
                         </p>
                     </div>
                     <button
@@ -113,11 +92,12 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
                     </button>
                 </div>
 
-                {/* Success */}
                 {state?.success ? (
                     <div className="flex flex-col items-center gap-3 py-10 text-center">
-                        <span className="font-serif text-brand-brown text-xl">C'est note !</span>
+                        <span className="font-serif text-brand-brown text-xl">C&apos;est noté !</span>
-                        <p className="font-sans text-sm text-brand-brown/45">Vous devriez recevoir un mail de confirmation d'ici peu.</p>
+                        <p className="font-sans text-sm text-brand-brown/45">
+                            Vous recevrez un email à chaque nouvel article.
+                        </p>
                         <button
                             onClick={onClose}
                             className="mt-4 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown/40 hover:text-brand-brown border-b border-brand-brown/20 hover:border-brand-brown pb-0.5 transition-colors duration-150 cursor-pointer"
@@ -127,9 +107,7 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
                     </div>
                 ) : (
                     <form ref={formRef} action={action} className="flex flex-col gap-5">
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <EmailField inputRef={emailInputRef} />
-                            <Field label="Email" name="email" type="email" required />
-                        </div>
 
                         {state?.error && (
                             <p className="font-sans text-xs text-red-700/80">{state.error}</p>
@@ -141,7 +119,7 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
                                 disabled={pending}
                                 className="inline-flex items-center gap-2.5 font-sans text-[13px] tracking-wide text-brand-beige bg-brand-brown rounded-lg px-7 py-3 hover:bg-brand-brown/85 disabled:opacity-50 transition-colors duration-200 cursor-pointer disabled:cursor-default"
                             >
-                                {pending ? 'Envoi…' : 'Envoyer'}
+                                {pending ? 'Inscription…' : "S'abonner"}
                                 {!pending && (
                                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
@@ -155,4 +133,4 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
         </div>,
         document.body,
     );
-}
+}

lib/mail.ts

@@ -25,3 +25,19 @@ export async function sendMail({ subject, html, from }: SendMailOptions) {
 
     return data;
 }
+
+export async function addContact(email: string) {
+    const audienceId = process.env.RESEND_AUDIENCE_ID;
+
+    if (!audienceId) throw new Error('RESEND_AUDIENCE_ID is not set');
+
+    const { data, error } = await resend.contacts.create({
+        email,
+        audienceId,
+        unsubscribed: false,
+    });
+
+    if (error) throw error;
+
+    return data;
+}

messages/en.json

@@ -72,9 +72,9 @@
             "subtitle": "Thoughts on architecture, web development, and the practices that make products last."
         },
         "blogSubscription": {
-            "title": "Working on something ambitious?",
+            "title": "Never miss an article",
-            "text": "I'm available for freelance projects — web apps, architecture, and product development.",
+            "text": "Get an email whenever a new article is published. No spam — unsubscribe anytime.",
-            "cta": "See my services"
+            "cta": "Subscribe"
         },
         "backToBlog": "Back to blog",
         "scrollPrompt": "Scroll",

messages/fr.json

@@ -72,9 +72,9 @@
             "subtitle": "Pensées sur l'architecture, le développement web et les pratiques qui font durer les produits."
         },
         "blogSubscription": {
-            "title": "Vous travaillez sur un projet ambitieux ?",
+            "title": "Ne ratez aucun article",
-            "text": "Je suis disponible pour des missions freelance — applications web, architecture et développement produit.",
+            "text": "Un email à chaque nouvel article. Pas de spam, désabonnement en un clic.",
-            "cta": "Voir mes services"
+            "cta": "S'abonner"
         },
         "backToBlog": "Retour au blog",
         "scrollPrompt": "Défiler",