238 lines
8.7 KiB
TypeScript
238 lines
8.7 KiB
TypeScript
"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<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
|
) => {
|
|
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 (
|
|
<section className="min-h-screen pt-32 pb-24 px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
<FadeIn>
|
|
<p
|
|
className="text-xs font-semibold uppercase tracking-widest mb-4"
|
|
style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
|
|
>
|
|
Contact
|
|
</p>
|
|
<h1
|
|
className="text-4xl md:text-5xl font-semibold mb-12"
|
|
style={{ letterSpacing: "-0.03em" }}
|
|
>
|
|
Get in Touch
|
|
</h1>
|
|
</FadeIn>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16">
|
|
{/* Contact info */}
|
|
<FadeIn delay={0.1} direction="right">
|
|
<div>
|
|
<p
|
|
className="text-xs font-semibold uppercase tracking-widest mb-6"
|
|
style={{ color: "#3a3a3a", letterSpacing: "0.15em" }}
|
|
>
|
|
Direct Contact
|
|
</p>
|
|
<div
|
|
className="p-7 rounded-sm border"
|
|
style={{ border: "1px solid #222222", background: "#111111" }}
|
|
>
|
|
<div className="mb-5">
|
|
<p className="text-base font-semibold mb-0.5">Nolan Kovacs</p>
|
|
<p className="text-sm" style={{ color: "#888888" }}>
|
|
Chief Executive Officer
|
|
</p>
|
|
<p className="text-xs mt-0.5" style={{ color: "#3a3a3a" }}>
|
|
Verimund Solutions
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2 pt-5 border-t" style={{ borderColor: "#1a1a1a" }}>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs w-16" style={{ color: "#3a3a3a" }}>Phone</span>
|
|
<a
|
|
href="tel:+12482529430"
|
|
className="text-sm transition-colors duration-200"
|
|
style={{ color: "#888888" }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = "#ffffff")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.color = "#888888")}
|
|
>
|
|
248-252-9430
|
|
</a>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs w-16" style={{ color: "#3a3a3a" }}>Email</span>
|
|
<a
|
|
href="mailto:nolankovacs@verimundsolutions.com"
|
|
className="text-sm transition-colors duration-200"
|
|
style={{ color: "#888888" }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = "#ffffff")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.color = "#888888")}
|
|
>
|
|
nolankovacs@verimundsolutions.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
|
|
{/* Contact form */}
|
|
<FadeIn delay={0.15} direction="left">
|
|
{status === "sent" ? (
|
|
<div
|
|
className="p-7 rounded-sm border text-center"
|
|
style={{ border: "1px solid #222222", background: "#111111" }}
|
|
>
|
|
<p
|
|
className="text-sm font-semibold mb-2"
|
|
style={{ color: "#4ade80" }}
|
|
>
|
|
Message sent.
|
|
</p>
|
|
<p className="text-sm" style={{ color: "#888888" }}>
|
|
We'll get back to you as soon as possible.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs" style={{ color: "#888888" }}>Name</label>
|
|
<input
|
|
name="name"
|
|
value={form.name}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="Your name"
|
|
style={inputStyle}
|
|
onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
|
|
onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs" style={{ color: "#888888" }}>Email</label>
|
|
<input
|
|
name="email"
|
|
type="email"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
required
|
|
placeholder="you@email.com"
|
|
style={inputStyle}
|
|
onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
|
|
onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs" style={{ color: "#888888" }}>Subject</label>
|
|
<select
|
|
name="subject"
|
|
value={form.subject}
|
|
onChange={handleChange}
|
|
style={{ ...inputStyle, cursor: "pointer" }}
|
|
onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
|
|
onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
|
|
>
|
|
{subjects.map((s) => (
|
|
<option key={s} value={s} style={{ background: "#111111" }}>
|
|
{s}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs" style={{ color: "#888888" }}>Message</label>
|
|
<textarea
|
|
name="message"
|
|
value={form.message}
|
|
onChange={handleChange}
|
|
required
|
|
rows={5}
|
|
placeholder="How can we help?"
|
|
style={{ ...inputStyle, resize: "vertical" }}
|
|
onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
|
|
onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
|
|
/>
|
|
</div>
|
|
|
|
{status === "error" && (
|
|
<p className="text-xs" style={{ color: "#f87171" }}>
|
|
Something went wrong. Please try again or email us directly.
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={status === "sending"}
|
|
className="py-3 text-sm font-medium rounded-sm transition-all duration-200"
|
|
style={{ background: "#ffffff", color: "#000000" }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.background = "#e0e0e0")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.background = "#ffffff")}
|
|
>
|
|
{status === "sending" ? "Sending..." : "Send Message"}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|