219 lines
8.0 KiB
TypeScript
219 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import { useForm, SubmitHandler } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { contactSchema } from "@/schemas/schemas";
|
|
import { toast } from "react-toastify";
|
|
|
|
type FormValues = z.infer<typeof contactSchema>;
|
|
|
|
const GetStartedPage = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
reset,
|
|
watch,
|
|
setValue,
|
|
} = useForm<FormValues>({ resolver: zodResolver(contactSchema) });
|
|
|
|
const onSubmit: SubmitHandler<FormValues> = async (data) => {
|
|
try {
|
|
const res = await fetch("/api/contact", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Request failed");
|
|
toast.success("Thank you! We'll be in touch.");
|
|
reset();
|
|
} catch (e) {
|
|
toast.error("Failed to save contact. Please try again.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8 py-6 sm:py-12">
|
|
<div className="text-center mb-6">
|
|
<h1 className="text-2xl md:text-3xl font-mono font-extrabold">
|
|
Join Us on This Journey
|
|
</h1>
|
|
<p className="mt-4 mb-4 max-w-4xl mx-auto text-sm sm:text-base font-mono">
|
|
Be a part of something innovative. As our early adapters, you will be
|
|
one of the key players making a change in how staying safe online is
|
|
important yet effortless. You will get exclusive early access to our
|
|
newest solutions and influence the development, while staying
|
|
protected in the process.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative rounded-3xl border-4 border-[var(--color-3)] px-10 sm:px-14 py-8 shadow-[0_0_20px_rgba(255,255,255,0.5)]">
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="relative z-10 space-y-4"
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="sr-only">First name</label>
|
|
<input
|
|
placeholder="First name"
|
|
{...register("firstName")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.firstName && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.firstName.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="sr-only">Last name</label>
|
|
<input
|
|
placeholder="Last name"
|
|
{...register("lastName")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.lastName && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.lastName.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="sr-only">Company name</label>
|
|
<input
|
|
placeholder="Company name"
|
|
{...register("companyName")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.companyName && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.companyName.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="sr-only">Address</label>
|
|
<input
|
|
placeholder="Address"
|
|
{...register("address")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.address && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.address.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="sr-only">Email</label>
|
|
<input
|
|
placeholder="Email"
|
|
type="email"
|
|
{...register("email")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.email && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.email.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="sr-only">Phone number</label>
|
|
<input
|
|
placeholder="Phone number"
|
|
{...register("phone")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.phone && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.phone.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="sr-only">Industry type</label>
|
|
<input
|
|
placeholder="Industry type"
|
|
{...register("industry")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-0.5 text-sm"
|
|
/>
|
|
{errors.industry && (
|
|
<p className="!text-[var(--color-8)] opacity-100 text-xs mt-1">
|
|
{errors.industry.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="sr-only">Additional notes</label>
|
|
<textarea
|
|
placeholder="Additional notes"
|
|
rows={8}
|
|
{...register("notes")}
|
|
className="w-full border border-[var(--color-3)] outline-none rounded-sm px-3 py-1 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 ml-6">
|
|
<div className="relative">
|
|
<input
|
|
type="checkbox"
|
|
id="subscribe"
|
|
{...register("subscribe")}
|
|
className="sr-only"
|
|
/>
|
|
<div
|
|
className={`w-4 h-4 border-2 border-[var(--color-3)] cursor-pointer flex items-center justify-center transition-colors shadow-[0_0_10px_rgba(255,255,255,0.2)] ${
|
|
watch("subscribe") ? "bg-[var(--color-3)]" : "bg-transparent"
|
|
}`}
|
|
onClick={() => setValue("subscribe", !watch("subscribe"))}
|
|
>
|
|
{watch("subscribe") && (
|
|
<svg
|
|
className="w-3 h-3 text-white"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<label
|
|
htmlFor="subscribe"
|
|
className="text-xs sm:text-sm font-mono cursor-pointer"
|
|
>
|
|
Sign up for our email list for updates, promotions, and more.
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex justify-center pt-2">
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="px-6 py-3 font-mono text-sm text-white bg-[var(--color-3)] rounded-xl disabled:opacity-50 cursor-pointer"
|
|
>
|
|
{isSubmitting ? "Sending..." : "Send"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{/* White glow */}
|
|
<div className="pointer-events-none absolute inset-0 rounded-3xl shadow-[0_0_5px_rgba(255,255,255,0.4)] z-0"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GetStartedPage;
|