diff --git a/apps/web/app/api/contact-us/route.ts b/apps/web/app/api/contact-us/route.ts new file mode 100644 index 0000000..3a4cde6 --- /dev/null +++ b/apps/web/app/api/contact-us/route.ts @@ -0,0 +1,51 @@ +import { NextRequest, NextResponse } from "next/server"; +import { Resend } from "resend"; + + +async function contactUsMail(name: string, email: string, message: string,phone:string, resend: Resend) { + try { + const { data, error } = await resend.emails.send({ + from: 'Script AI ', + to: 'afrin@tryscriptai.com', + subject: "📬 New Contact Message", + html: `
+
+

📬 New Contact Message

+

From: ${name}

+

Email: ${email}

+

Phone No: ${phone}

+
+

${message}

+
+

Sent on ${new Date().toLocaleString()}

+
+
`, + }); + if (error) { + console.error('Error sending issue mail:', error) + return { success: false, error } + } + + return { success: true, data } + } catch (error) { + console.error('Error sending mail:', error); + } +} + +export async function POST(req: NextRequest) { + const { email, message, name, phone } = await req.json() + + try { + const resend = new Resend(process.env.RESEND_API_KEY!); + + if (!email || !message || !name) { + return NextResponse.json({ success: false, error: 'Missing required fields' }, { status: 400 }) + } + + const result = await contactUsMail(email, message, name, phone, resend) + return NextResponse.json(result, { status: result?.success ? 200 : 500 }) + + } catch (error) { + console.log(error) + } +} \ No newline at end of file diff --git a/apps/web/app/contact-us/page.tsx b/apps/web/app/contact-us/page.tsx new file mode 100644 index 0000000..d7f36f0 --- /dev/null +++ b/apps/web/app/contact-us/page.tsx @@ -0,0 +1,203 @@ +"use client"; +import Footer from "@/components/footer"; +import { motion } from "motion/react"; +import { useState } from "react"; +import logo from "@/public/dark-logo.png" +import Image from "next/image"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { toast } from "sonner"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; + +export default function ContactPage() { + const [formData, setFormData] = useState({ name: "", email: "", message: "", phone: "" }); + const [loading, setLoading] = useState(false) + + const handleChange = (e: React.ChangeEvent) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + + const handleSubmit = async (e: React.FormEvent) => { + if(loading) return + setLoading(true) + console.log(formData) + e.preventDefault(); + try { + const response = await fetch("/api/contact-us", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(formData), + }); + + if (!response.ok) throw new Error("Failed to send mail"); + + await response.json(); + toast.success("mail sent successfully!", { + description: "Thank you for reaching out!. We'll look into it soon.", + }); + setFormData({ name: "", email: "", message: "", phone:"" }) + } catch (error:any) { + console.error(error, "error") + toast.error("Failed to send mail", { + description: error?.message || "Something went wrong. Please try again.", + }); + }finally{ + setLoading(false) + } + // TODO: integrate with backend or Supabase + }; + + return ( +
+ {/* Hero Section */} +
+
+ + Contact Us + + + Got questions, feedback, or ideas? We’d love to hear from you! + Our team is always ready to collaborate and support your AI-powered creative journey. + +
+
+ + {/* Contact Section */} +
+
+ + Logo + + + {/* Right: Contact Form */} + +

Send Us a Message

+
+
+ + +
+
+ + +
+
+ + +
+
+ +