add BlogCTASection and BlogSubForm components with translations for blog subscription

2026-06-02 19:32:50 +02:00
parent a8c8b61a3f
commit 77f3c4ddbd
6 changed files with 261 additions and 0 deletions
@@ -0,0 +1,70 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import Link from 'next/link';
+
+type Props = {
+    locale: string;
+    title: string;
+    text: string;
+    cta: string;
+};
+
+export function BlogCTASection({ locale, title, text, cta }: Props) {
+    const sectionRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const section = sectionRef.current;
+        if (!section) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.querySelectorAll('.reveal').forEach((el, i) => {
+                            setTimeout(() => el.classList.add('visible'), i * 120);
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.1 }
+        );
+
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <div ref={sectionRef} className="w-full flex justify-center items-center pt-24 md:pt-36">
+            <div
+                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"
+                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">
+                        {title}
+                    </h3>
+                    <p className="font-sans text-sm text-left text-brand-brown/60 leading-relaxed">
+                        {text}
+                    </p>
+                </div>
+
+                <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">
+                        {cta}
+                        <svg
+                            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>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}
@@ -1,6 +1,9 @@
 import { getAllArticles } from "@/lib/blog/get-articles";
 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 }>;
@@ -8,11 +11,22 @@ type props = {

 export default async function BlogPage({ params }: props) {
    const { locale } = await params;
+    const t = await getTranslations('blogPage.blogSubscription');
    const articles = getAllArticles(locale);

    return (
        <main className="bg-brand-beige">
+            <BlogSubFormController />
+
            <BlogHero />
+
+            <BlogCTASection
+                locale={locale}
+                title={t("title")}
+                text={t("text")}
+                cta={t("cta")}
+            />
+
            <ArticleList locale={locale} articles={articles} />
        </main>
    );
@@ -0,0 +1,9 @@
+'use client';
+
+import { useState } from 'react';
+import { BlogSubFormModal } from '@/components/ui/BlogSubFormModal';
+
+export function BlogSubFormController() {
+    const [subOpen, setSubOpen] = useState(false);
+    return <BlogSubFormModal isOpen={subOpen} onClose={() => setSubOpen(false)} />;
+}
@@ -0,0 +1,158 @@
+'use client';
+
+import { useEffect, useRef, useState, useActionState } from 'react';
+import { createPortal } from 'react-dom';
+import { sendContactMail, type ContactFormState } from '@/app/actions/sendContactMail';
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+type FieldProps = {
+    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}
+            </label>
+            {textarea ? (
+                <textarea
+                    name={name}
+                    required={required}
+                    rows={5}
+                    className={`${base} resize-none`}
+                />
+            ) : (
+                <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>(
+        sendContactMail,
+        null,
+    );
+    const firstInputRef = useRef<HTMLInputElement>(null);
+    const formRef = useRef<HTMLFormElement>(null);
+
+    useEffect(() => setMounted(true), []);
+
+    useEffect(() => {
+        if (isOpen) {
+            setTimeout(() => firstInputRef.current?.focus(), 50);
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => { document.body.style.overflow = ''; };
+    }, [isOpen]);
+
+    useEffect(() => {
+        const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) document.addEventListener('keydown', handleKey);
+        return () => document.removeEventListener('keydown', handleKey);
+    }, [isOpen, onClose]);
+
+    useEffect(() => {
+        if (!isOpen) formRef.current?.reset();
+    }, [isOpen]);
+
+    if (!mounted || !isOpen) return null;
+
+    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
+                        </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.
+                        </p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        aria-label="Fermer"
+                        className="shrink-0 p-1.5 rounded-lg text-brand-brown/35 hover:text-brand-brown hover:bg-brand-brown/6 transition-colors duration-150 cursor-pointer"
+                    >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </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>
+                        <p className="font-sans text-sm text-brand-brown/45">Vous devriez recevoir un mail de confirmation d'ici peu.</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"
+                        >
+                            Fermer
+                        </button>
+                    </div>
+                ) : (
+                    <form ref={formRef} action={action} className="flex flex-col gap-5">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <Field label="Email" name="email" type="email" required />
+                        </div>
+
+                        {state?.error && (
+                            <p className="font-sans text-xs text-red-700/80">{state.error}</p>
+                        )}
+
+                        <div className="flex justify-end pt-1">
+                            <button
+                                type="submit"
+                                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 && (
+                                    <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" />
+                                    </svg>
+                                )}
+                            </button>
+                        </div>
+                    </form>
+                )}
+            </div>
+        </div>,
+        document.body,
+    );
+}
@@ -71,6 +71,11 @@
            "title": "Blog",
            "subtitle": "Thoughts on architecture, web development, and the practices that make products last."
        },
+        "blogSubscription": {
+            "title": "Working on something ambitious?",
+            "text": "I'm available for freelance projects — web apps, architecture, and product development.",
+            "cta": "See my services"
+        },
        "backToBlog": "Back to blog",
        "scrollPrompt": "Scroll",
        "readArticle": "Read article",
@@ -71,6 +71,11 @@
            "title": "Blog",
            "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 ?",
+            "text": "Je suis disponible pour des missions freelance — applications web, architecture et développement produit.",
+            "cta": "Voir mes services"
+        },
        "backToBlog": "Retour au blog",
        "scrollPrompt": "Défiler",
        "readArticle": "Lire l'article",