mailing

app/[locale]/contact/page.tsx

@@ -3,7 +3,8 @@ import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
 import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL, LOGO_URL } from '@/lib/schema';
-import { Section, Container, Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
+import { Section, Container, Heading } from '@/components/ui';
+import ContactForm from '@/components/ContactForm';
 
 interface ContactPageProps {
   params: {
@@ -184,54 +185,7 @@ export default function ContactPage() {
 
             {/* Contact Form */}
             <div className="lg:col-span-7">
-              <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
-                <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
-                  {t('form.title')}
-                </Heading>
-                <form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
-                  <div className="space-y-1 md:space-y-2">
-                    <Label htmlFor="name">{t('form.name')}</Label>
-                    <Input 
-                      type="text" 
-                      id="name" 
-                      name="name"
-                      autoComplete="name"
-                      enterKeyHint="next"
-                      placeholder={t('form.namePlaceholder')}
-                      required
-                    />
-                  </div>
-                  <div className="space-y-1 md:space-y-2">
-                    <Label htmlFor="email">{t('form.email')}</Label>
-                    <Input 
-                      type="email" 
-                      id="email" 
-                      name="email"
-                      autoComplete="email"
-                      inputMode="email"
-                      enterKeyHint="next"
-                      placeholder={t('form.emailPlaceholder')}
-                      required
-                    />
-                  </div>
-                  <div className="md:col-span-2 space-y-1 md:space-y-2">
-                    <Label htmlFor="message">{t('form.message')}</Label>
-                    <Textarea 
-                      id="message" 
-                      name="message"
-                      rows={4} 
-                      enterKeyHint="send"
-                      placeholder={t('form.messagePlaceholder')}
-                      required
-                    />
-                  </div>
-                  <div className="md:col-span-2 pt-2 md:pt-4">
-                    <Button type="submit" variant="saturated" size="lg" className="w-full shadow-xl shadow-saturated/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform">
-                      {t('form.submit')}
-                    </Button>
-                  </div>
-                </form>
-              </Card>
+              <ContactForm />
             </div>
           </div>
         </Container>

app/actions/contact.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import { sendEmail } from "@/lib/mail/mailer";
+import ContactEmail from "@/components/emails/ContactEmail";
+import React from "react";
+import * as Sentry from "@sentry/nextjs";
+
+export async function sendContactFormAction(formData: FormData) {
+  const name = formData.get("name") as string;
+  const email = formData.get("email") as string;
+  const message = formData.get("message") as string;
+  const productName = formData.get("productName") as string | null;
+
+  if (!name || !email || !message) {
+    return { success: false, error: "Missing required fields" };
+  }
+
+  const subject = productName 
+    ? `Product Inquiry: ${productName}` 
+    : "New Contact Form Submission";
+
+  const result = await sendEmail({
+    subject,
+    template: React.createElement(ContactEmail, {
+      name,
+      email,
+      message,
+      productName: productName || undefined,
+      subject,
+    }),
+  });
+
+  return result;
+}