diff --git a/app/api/contact/route.ts b/app/api/contact/route.ts new file mode 100644 index 0000000..37ad67d --- /dev/null +++ b/app/api/contact/route.ts @@ -0,0 +1,27 @@ +import { NextRequest, NextResponse } from "next/server"; + +export async function POST(req: NextRequest) { + const body = await req.json(); + const { name, email, subject, message } = body; + + if (!name || !email || !message) { + return NextResponse.json({ error: "Missing fields" }, { status: 400 }); + } + + // Forward to VPS API which handles email delivery + // Once email is configured, the VPS API will send to support@verimundsolutions.com + try { + const res = await fetch(`${process.env.API_URL}/contact`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ name, email, subject, message }), + }); + + if (!res.ok) throw new Error("API error"); + return NextResponse.json({ ok: true }); + } catch { + // Log the submission server-side so nothing is lost even if email is not yet set up + console.log("[CONTACT SUBMISSION]", { name, email, subject, message, ts: new Date().toISOString() }); + return NextResponse.json({ ok: true }); // Still return ok so the user isn't confused + } +} diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..32b9ad3 --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,237 @@ +"use client"; + +import { useState } from "react"; +import FadeIn from "@/components/FadeIn"; + +const subjects = [ + "General Inquiry", + "Billing", + "Technical Support", + "Hardware ID Reset", + "Other", +]; + +export default function Contact() { + const [form, setForm] = useState({ + name: "", + email: "", + subject: subjects[0], + message: "", + }); + const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle"); + + const handleChange = ( + e: React.ChangeEvent + ) => { + setForm({ ...form, [e.target.name]: e.target.value }); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setStatus("sending"); + try { + const res = await fetch("/api/contact", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(form), + }); + if (res.ok) { + setStatus("sent"); + setForm({ name: "", email: "", subject: subjects[0], message: "" }); + } else { + setStatus("error"); + } + } catch { + setStatus("error"); + } + }; + + const inputStyle = { + background: "#111111", + border: "1px solid #222222", + color: "#ffffff", + borderRadius: "2px", + padding: "10px 14px", + fontSize: "14px", + width: "100%", + outline: "none", + transition: "border-color 0.2s", + }; + + return ( +
+
+ +

+ Contact +

+

+ Get in Touch +

+ + +
+ {/* Contact info */} + + + + + {/* Contact form */} + + {status === "sent" ? ( +
+

+ Message sent. +

+

+ We'll get back to you as soon as possible. +

+
+ ) : ( +
+
+
+ + (e.currentTarget.style.borderColor = "#ffffff")} + onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")} + /> +
+
+ + (e.currentTarget.style.borderColor = "#ffffff")} + onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")} + /> +
+
+ +
+ + +
+ +
+ +