73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { KleapForm } from "@/components/kleap-form";
|
|
import { Footer } from "@/components/footer";
|
|
|
|
export default function ContactPage() {
|
|
const fields = [
|
|
{ name: "name", label: "Full Name", type: "text", required: true },
|
|
{ name: "email", label: "Email Address", type: "email", required: true },
|
|
{ name: "phone", label: "Phone Number", type: "tel", required: true },
|
|
{ name: "vehicle", label: "Vehicle Make & Model", type: "text", required: true },
|
|
{
|
|
name: "service",
|
|
label: "Service Interested In",
|
|
type: "select",
|
|
options: [
|
|
{ label: "Express Detail", value: "express" },
|
|
{ label: "Apex Signature", value: "signature" },
|
|
{ label: "Ceramic Coating", value: "ceramic" },
|
|
{ label: "Paint Correction", value: "correction" },
|
|
{ label: "Other", value: "other" }
|
|
],
|
|
required: true
|
|
},
|
|
{ name: "message", label: "Additional Details", type: "textarea", required: false },
|
|
];
|
|
|
|
return (
|
|
<main className="pt-20">
|
|
<section className="py-24">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
|
<div>
|
|
<Heading>Book Your Appointment</Heading>
|
|
<Subheading className="mt-4">
|
|
Fill out the form below and we'll get back to you within 24 hours with a quote and availability.
|
|
</Subheading>
|
|
|
|
<div className="mt-12 space-y-8">
|
|
<div>
|
|
<h4 className="font-bold text-lg">Location</h4>
|
|
<p className="text-neutral-600">Serving Cedar Rapids, Marion, Hiawatha, and surrounding areas.</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-lg">Hours</h4>
|
|
<p className="text-neutral-600">Monday - Friday: 8:00 AM - 6:00 PM</p>
|
|
<p className="text-neutral-600">Saturday: 9:00 AM - 4:00 PM</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-lg">Contact Info</h4>
|
|
<p className="text-neutral-600">(319) 555-0123</p>
|
|
<p className="text-neutral-600">hello@apexdetailing.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white p-8 rounded-2xl shadow-xl border border-neutral-100">
|
|
<KleapForm
|
|
formId="contact-apex"
|
|
title="Booking Request"
|
|
fields={fields}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|