diff --git a/app/action.ts b/app/action.ts new file mode 100644 index 0000000..5ce7caf --- /dev/null +++ b/app/action.ts @@ -0,0 +1,34 @@ +'use server' + +import { Resend } from 'resend'; + +const resend = new Resend(process.env.RESEND_API_KEY); + +export async function sendContactEmail(formData: FormData) { + const company = formData.get('company') as string; + const name = formData.get('name') as string; + const email = formData.get('email') as string; + const phone = formData.get('phone') as string; + const message = formData.get('message') as string; + + try { + const data = await resend.emails.send({ + from: 'onboarding@resend.dev', // Use this default until you verify your own domain + to: 'shivampandey5106@gmail.com', + subject: `New Contact Form Submission from ${name}`, + html: ` +

New Inquiry

+

Company: ${company}

+

Name: ${name}

+

Email: ${email}

+

Phone: ${phone}

+

Message:

+

${message}

+ `, + }); + + return { success: true, data }; + } catch (error) { + return { success: false, error }; + } +} \ No newline at end of file diff --git a/components/contact/page.tsx b/components/contact/page.tsx index 605a1f0..c985fec 100644 --- a/components/contact/page.tsx +++ b/components/contact/page.tsx @@ -1,23 +1,41 @@ +"use client"; // Required for handling form submission + import Image from "next/image"; +import { useState } from "react"; +import { sendContactEmail } from "@/app/action"; // Adjust path if needed export default function ContactPage() { + const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); + + async function handleSubmit(event: React.FormEvent) { + event.preventDefault(); + setStatus("submitting"); + + const formData = new FormData(event.currentTarget); + const result = await sendContactEmail(formData); + + if (result.success) { + setStatus("success"); + (event.target as HTMLFormElement).reset(); // Clear form + } else { + setStatus("error"); + } + } + return (
- {/* WHITE FOREGROUND */}
- {/* LEFT IMAGE SECTION */}
Customer Support - {/* subtle red overlay */}
@@ -25,7 +43,6 @@ export default function ContactPage() { {/* RIGHT FORM SECTION */}
-

Contact Us

@@ -34,11 +51,11 @@ export default function ContactPage() { filling out the form below.

-
- + {/* Company Name */}
- {/* Phone + Fax */} -
+ {/* Phone */} +
-
{/* Message */}