80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { KleapForm, KleapFormField } from "@/components/kleap-form";
|
|
import { Footer } from "@/components/footer";
|
|
import { Card } from "@/components/ui/card";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function ContactPage() {
|
|
const fields: KleapFormField[] = [
|
|
{ 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: "Full Interior Deep Clean ($80)", value: "interior" },
|
|
{ label: "Exterior Hand Wash ($40)", value: "exterior" },
|
|
{ label: "Wheel & Tire Shine ($25)", value: "wheels" },
|
|
{ label: "Full Detail Package ($110)", value: "full" }
|
|
],
|
|
required: true
|
|
},
|
|
{ name: "message", label: "Preferred Date & Time", 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">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
>
|
|
<Heading>Book Your Detail</Heading>
|
|
<Subheading className="mt-4">
|
|
Fill out the form below and I'll get back to you within 2 hours with a quote and availability.
|
|
</Subheading>
|
|
|
|
<div className="mt-12 space-y-8">
|
|
<Card className="p-6 border-neutral-200 dark:border-neutral-800">
|
|
<h4 className="font-bold text-lg">Location</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400">Serving Cedar Rapids, IA and surrounding areas. I come to you!</p>
|
|
</Card>
|
|
<Card className="p-6 border-neutral-200 dark:border-neutral-800">
|
|
<h4 className="font-bold text-lg">Hours</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400">Mon-Fri: 4:00 PM - 8:00 PM</p>
|
|
<p className="text-neutral-600 dark:text-neutral-400">Sat-Sun: 8:00 AM - 8:00 PM</p>
|
|
</Card>
|
|
<div className="p-6 bg-blue-600 text-white rounded-2xl shadow-lg">
|
|
<h4 className="font-bold text-lg mb-2">💳 Secure Payments</h4>
|
|
<p className="text-sm opacity-90">After we confirm your time, I'll send a secure Stripe payment link to your email to lock in your spot.</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="bg-white dark:bg-neutral-950 p-8 rounded-2xl shadow-2xl border border-neutral-100 dark:border-neutral-800"
|
|
>
|
|
<KleapForm
|
|
formId="booking-apex"
|
|
title="Booking Request"
|
|
fields={fields}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|