93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { KleapForm } from "@/components/kleap-form";
|
|
import { Phone, Mail, MapPin, Clock } from "lucide-react";
|
|
|
|
export function Contact() {
|
|
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: "service",
|
|
label: "Service Interested In",
|
|
type: "select",
|
|
options: [
|
|
{ label: "Interior Detailing", value: "interior" },
|
|
{ label: "Exterior Detailing", value: "exterior" },
|
|
{ label: "Full Detail Package", value: "full" },
|
|
{ label: "Ceramic Coating", value: "ceramic" },
|
|
{ label: "Other", value: "other" }
|
|
],
|
|
required: true
|
|
},
|
|
{ name: "message", label: "Vehicle Make/Model & Details", type: "textarea", required: true }
|
|
];
|
|
|
|
return (
|
|
<section id="contact" className="py-24 bg-neutral-50 dark:bg-neutral-900">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
|
<div>
|
|
<Heading>Get a Free Quote</Heading>
|
|
<Subheading className="mt-4 mb-10">
|
|
Ready to give your car the treatment it deserves? Fill out the form and we'll get back to you with a custom quote.
|
|
</Subheading>
|
|
|
|
<div className="space-y-8">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
|
|
<Phone className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-lg">Call or Text</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400">(319) 555-0123</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
|
|
<Mail className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-lg">Email Us</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400">info@apexdetailingcr.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
|
|
<MapPin className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-lg">Location</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400">Cedar Rapids, IA</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
|
|
<Clock className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-lg">Hours</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400">Mon-Sat: 8:00 AM - 6:00 PM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-neutral-800 p-8 rounded-2xl shadow-xl">
|
|
<KleapForm
|
|
formId="contact-apex"
|
|
title="Quote Request"
|
|
fields={fields}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|