Wire contact form, subscribe page, and footer newsletter to send emails

- Contact form POSTs to /api/contact → emails Katheryn with reply-to sender
- Subscribe page and footer form POST to /api/subscribe → welcome email
  to subscriber + notification to Katheryn
- Loading states, error handling, and disabled buttons while sending

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/app/api/contact/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { sendContactMessage } from '@/lib/email';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { firstName, lastName, email, subject, message } = body;
+
+    if (!firstName || !lastName || !email || !subject || !message) {
+      return NextResponse.json({ error: 'All fields are required' }, { status: 400 });
+    }
+
+    await sendContactMessage({ firstName, lastName, email, subject, message });
+
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    console.error('Contact form error:', err);
+    return NextResponse.json({ error: 'Failed to send message' }, { status: 500 });
+  }
+}

frontend/src/app/api/subscribe/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { sendSubscribeNotification } from '@/lib/email';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { email } = body;
+
+    if (!email) {
+      return NextResponse.json({ error: 'Email is required' }, { status: 400 });
+    }
+
+    await sendSubscribeNotification(email);
+
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    console.error('Subscribe error:', err);
+    return NextResponse.json({ error: 'Failed to subscribe' }, { status: 500 });
+  }
+}

frontend/src/app/contact/page.tsx

@@ -15,11 +15,26 @@ function ContactForm() {
     message: artworkEnquiry ? `I am interested in the artwork "${artworkEnquiry}".` : '',
   });
   const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState('');
+  const [sending, setSending] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // TODO: Implement form submission (e.g., via API route or email service)
+    setSending(true);
-    setSubmitted(true);
+    setError('');
+    try {
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+      if (!res.ok) throw new Error('Failed to send');
+      setSubmitted(true);
+    } catch {
+      setError('Something went wrong. Please try again or email post@ktrenshaw.com directly.');
+    } finally {
+      setSending(false);
+    }
   };
 
   if (submitted) {
@@ -137,8 +152,12 @@ function ContactForm() {
                 />
               </div>
 
-              <button type="submit" className="w-full btn btn-primary py-4">
+              {error && (
-                Send Message
+                <p className="text-sm text-red-600">{error}</p>
+              )}
+
+              <button type="submit" disabled={sending} className="w-full btn btn-primary py-4 disabled:opacity-50">
+                {sending ? 'Sending...' : 'Send Message'}
               </button>
             </form>
           </div>

frontend/src/app/subscribe/page.tsx

@@ -5,11 +5,26 @@ import { useState } from 'react';
 export default function SubscribePage() {
   const [email, setEmail] = useState('');
   const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState('');
+  const [sending, setSending] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // TODO: Connect to newsletter API
+    setSending(true);
-    setSubmitted(true);
+    setError('');
+    try {
+      const res = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      if (!res.ok) throw new Error('Failed to subscribe');
+      setSubmitted(true);
+    } catch {
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setSending(false);
+    }
   };
 
   if (submitted) {
@@ -56,11 +71,16 @@ export default function SubscribePage() {
             />
           </div>
 
+          {error && (
+            <p className="text-sm text-red-600">{error}</p>
+          )}
+
           <button
             type="submit"
-            className="w-full bg-gray-900 px-6 py-4 text-sm font-medium uppercase tracking-wider text-white hover:bg-gray-700"
+            disabled={sending}
+            className="w-full bg-gray-900 px-6 py-4 text-sm font-medium uppercase tracking-wider text-white hover:bg-gray-700 disabled:opacity-50"
           >
-            Subscribe
+            {sending ? 'Subscribing...' : 'Subscribe'}
           </button>
 
           <p className="text-xs text-gray-500 text-center">

frontend/src/components/footer.tsx

@@ -1,28 +1,66 @@
-import Link from 'next/link';
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+function FooterNewsletter() {
+  const [email, setEmail] = useState('');
+  const [status, setStatus] = useState<'idle' | 'sending' | 'done' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('sending');
+    try {
+      const res = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      if (!res.ok) throw new Error('Failed');
+      setStatus('done');
+      setEmail('');
+    } catch {
+      setStatus('error');
+    }
+  };
 
-export function Footer() {
   return (
-    <footer className="border-t border-gray-200 bg-white">
+    <div className="border-b border-gray-200">
-      {/* Newsletter */}
+      <div className="mx-auto max-w-7xl px-4 py-8 text-center">
-      <div className="border-b border-gray-200">
+        <h3 className="font-serif text-xl">Stay Connected</h3>
-        <div className="mx-auto max-w-7xl px-4 py-8 text-center">
+        {status === 'done' ? (
-          <h3 className="font-serif text-xl">Stay Connected</h3>
+          <p className="mt-4 text-sm text-gray-600">Thank you for subscribing!</p>
-          <form className="mx-auto mt-4 flex max-w-md gap-2">
+        ) : (
+          <form onSubmit={handleSubmit} className="mx-auto mt-4 flex max-w-md gap-2">
             <input
               type="email"
               placeholder="Your email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
               className="flex-1 border border-gray-300 px-4 py-2 text-sm focus:border-gray-900 focus:outline-none"
               required
             />
             <button
               type="submit"
-              className="bg-gray-900 px-6 py-2 text-sm font-medium uppercase tracking-wider text-white hover:bg-gray-700"
+              disabled={status === 'sending'}
+              className="bg-gray-900 px-6 py-2 text-sm font-medium uppercase tracking-wider text-white hover:bg-gray-700 disabled:opacity-50"
             >
-              Subscribe
+              {status === 'sending' ? '...' : 'Subscribe'}
             </button>
           </form>
-        </div>
+        )}
+        {status === 'error' && (
+          <p className="mt-2 text-xs text-red-600">Something went wrong. Please try again.</p>
+        )}
       </div>
+    </div>
+  );
+}
+
+export function Footer() {
+  return (
+    <footer className="border-t border-gray-200 bg-white">
+      <FooterNewsletter />
 
       {/* Links + copyright */}
       <div className="mx-auto max-w-7xl px-4 py-8">

frontend/src/lib/email.ts

@@ -20,6 +20,77 @@ const transporter = nodemailer.createTransport({
   },
 });
 
+export async function sendContactMessage(data: {
+  firstName: string;
+  lastName: string;
+  email: string;
+  subject: string;
+  message: string;
+}): Promise<void> {
+  if (!SMTP_PASS) {
+    console.warn('SMTP_PASS not set, skipping contact email');
+    return;
+  }
+
+  const subjectLabels: Record<string, string> = {
+    purchase: 'Artwork Enquiry',
+    commission: 'Commission Request',
+    session: 'Sessions / Workshops',
+    iyos: 'In Your Own Skin',
+    press: 'Press / Media',
+    other: 'General Enquiry',
+  };
+
+  const label = subjectLabels[data.subject] || data.subject;
+
+  const html = `
+    <div style="font-family: sans-serif; max-width: 600px;">
+      <h2>New Contact Form Message</h2>
+      <p><strong>From:</strong> ${data.firstName} ${data.lastName} (${data.email})</p>
+      <p><strong>Subject:</strong> ${label}</p>
+      <h3>Message:</h3>
+      <p style="white-space: pre-wrap;">${data.message}</p>
+    </div>
+  `;
+
+  await transporter.sendMail({
+    from: `"Katheryn Trenshaw Website" <${FROM_EMAIL}>`,
+    replyTo: `"${data.firstName} ${data.lastName}" <${data.email}>`,
+    to: KATHERYN_EMAIL,
+    subject: `[Contact] ${label} — ${data.firstName} ${data.lastName}`,
+    html,
+  });
+}
+
+export async function sendSubscribeNotification(email: string): Promise<void> {
+  if (!SMTP_PASS) {
+    console.warn('SMTP_PASS not set, skipping subscribe email');
+    return;
+  }
+
+  // Notify Katheryn of new subscriber
+  await transporter.sendMail({
+    from: `"Katheryn Trenshaw Website" <${FROM_EMAIL}>`,
+    to: KATHERYN_EMAIL,
+    subject: `New subscriber: ${email}`,
+    html: `<p>New mailing list signup: <strong>${email}</strong></p>`,
+  });
+
+  // Send welcome to subscriber
+  await transporter.sendMail({
+    from: `"Katheryn Trenshaw" <${FROM_EMAIL}>`,
+    to: email,
+    subject: 'Welcome — Katheryn Trenshaw',
+    html: `
+      <div style="font-family: Georgia, serif; max-width: 600px; margin: 0 auto; color: #333;">
+        <h1 style="font-size: 24px; font-weight: normal;">Thank you for subscribing</h1>
+        <p>You'll receive updates on new work, exhibitions, and events.</p>
+        <p style="margin-top: 24px;">With gratitude,<br/>Katheryn Trenshaw</p>
+      </div>
+    `,
+  });
+}
+
 interface OrderEmailData {
   orderId: number;
   customerEmail: string;