add contact form modal and email sending functionality

2026-06-02 18:49:24 +02:00
parent fe260420b6
commit 3b630bb68c
3 changed files with 210 additions and 7 deletions
@@ -1,8 +1,9 @@
 'use client';

-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { ProjectCard } from '@/components/ui/ProjectCard';
+import { ContactFormModal } from '@/components/ui/ContactFormModal';
 import { Project } from '@/lib/projects/types';

 type props = {
@@ -13,6 +14,8 @@ type props = {
 export default function FreelanceClient({ projects, locale }: props) {
    const t = useTranslations('freelancePage');

+    const [contactOpen, setContactOpen] = useState(false);
+
    const heroRef = useRef<HTMLElement>(null);
    const belowFoldRef = useRef<HTMLDivElement>(null);

@@ -102,6 +105,7 @@ export default function FreelanceClient({ projects, locale }: props) {

    return (
        <main className="bg-brand-beige text-brand-brown flex flex-col">
+            <ContactFormModal isOpen={contactOpen} onClose={() => setContactOpen(false)} />

            {/* ── Hero ── */}
            <section
@@ -146,12 +150,12 @@ export default function FreelanceClient({ projects, locale }: props) {
                            className="hero-reveal flex flex-col sm:flex-row gap-5"
                            style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
                        >
-                            <a
-                                href="mailto:matheo.guilbert49@gmail.com?subject=Projet freelance"
+                            <button
+                                onClick={() => setContactOpen(true)}
                                className="inline-flex items-center justify-center gap-2 font-sans text-[13px] tracking-wide text-brand-brown bg-brand-beige rounded-lg px-7 py-3.5 hover:bg-brand-beige/90 transition-colors duration-200 cursor-pointer"
                            >
                                {t('hero.cta1')}
-                            </a>
+                            </button>
                            <button
                                onClick={() => document.getElementById('works')?.scrollIntoView({ behavior: 'smooth' })}
                                className="group inline-flex items-center gap-2 font-sans text-[13px] text-brand-beige/45 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
@@ -377,15 +381,15 @@ export default function FreelanceClient({ projects, locale }: props) {
                                {t('cta.text')}
                            </p>
                            <div className="flex flex-col items-center gap-5">
-                                <a
-                                    href="mailto:matheo.guilbert49@gmail.com?subject=Projet freelance"
+                                <button
+                                    onClick={() => setContactOpen(true)}
                                    className="inline-flex items-center gap-2.5 font-sans text-[13px] tracking-wide text-brand-beige bg-brand-brown rounded-lg px-8 py-3.5 hover:bg-brand-brown/85 transition-colors duration-200 cursor-pointer"
                                >
                                    {t('cta.button')}
                                    <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>
-                                </a>
+                                </button>
                                <div className="flex flex-col gap-1.5">
                                    <span className="font-sans text-xs text-brand-brown/35">{t('cta.note1')}</span>
                                    <span className="font-sans text-xs text-brand-brown/35">{t('cta.note2')}</span>
@@ -0,0 +1,39 @@
+'use server';
+
+import { sendMail } from '@/lib/mail';
+
+export type ContactFormState = { success: true } | { success: false; error: string } | null;
+
+export async function sendContactMail(
+    _: ContactFormState,
+    formData: FormData,
+): Promise<ContactFormState> {
+    const name = (formData.get('name') as string)?.trim();
+    const email = (formData.get('email') as string)?.trim();
+    const message = (formData.get('message') as string)?.trim();
+
+    if (!name || !email || !message) {
+        return { success: false, error: 'Tous les champs sont requis.' };
+    }
+
+    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRe.test(email)) {
+        return { success: false, error: 'Adresse email invalide.' };
+    }
+
+    try {
+        await sendMail({
+            from: 'Formulaire de contact <noreply@matheoguilbert.fr>',
+            subject: `Message de ${name}`,
+            html: `
+                <p><strong>Nom :</strong> ${name}</p>
+                <p><strong>Email :</strong> ${email}</p>
+                <hr/>
+                <p>${message.replace(/\n/g, '<br/>')}</p>
+            `,
+        });
+        return { success: true };
+    } catch {
+        return { success: false, error: 'Une erreur est survenue. Réessaie plus tard.' };
+    }
+}
@@ -0,0 +1,160 @@
+'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 ContactFormModal({ 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">
+                            Démarrons un projet
+                        </h2>
+                        <p className="font-sans text-sm text-brand-brown/45 mt-1.5">
+                            Je réponds sous 48h.
+                        </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">Message envoyé.</span>
+                        <p className="font-sans text-sm text-brand-brown/45">Je vous reviens très vite.</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="Nom" name="name" required inputRef={firstInputRef} />
+                            <Field label="Email" name="email" type="email" required />
+                        </div>
+                        <Field label="Message" name="message" textarea required />
+
+                        {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,
+    );
+}