117 lines
3.5 KiB
TypeScript
117 lines
3.5 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Footer } from "@/components/footer";
|
|
import { KleapForm } from "@/components/kleap-form";
|
|
|
|
const bookingFields = [
|
|
{
|
|
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 Type",
|
|
type: "select",
|
|
required: true,
|
|
options: [
|
|
{ label: "Custom Shoe Order", value: "custom" },
|
|
{ label: "Professional Fitting", value: "fitting" },
|
|
{ label: "Style Consultation", value: "consultation" },
|
|
],
|
|
},
|
|
{
|
|
name: "date",
|
|
label: "Preferred Date",
|
|
type: "text", // Using text for simplicity in this template, usually a date picker
|
|
required: true,
|
|
},
|
|
{
|
|
name: "time",
|
|
label: "Preferred Time",
|
|
type: "select",
|
|
required: true,
|
|
options: [
|
|
{ label: "Morning (9AM - 12PM)", value: "morning" },
|
|
{ label: "Afternoon (12PM - 4PM)", value: "afternoon" },
|
|
{ label: "Evening (4PM - 7PM)", value: "evening" },
|
|
],
|
|
},
|
|
{
|
|
name: "notes",
|
|
label: "Additional Notes",
|
|
type: "textarea",
|
|
required: false,
|
|
},
|
|
];
|
|
|
|
export default function BookingPage() {
|
|
return (
|
|
<main className="min-h-screen pt-32">
|
|
<Container className="max-w-4xl pb-24">
|
|
<div className="text-center mb-16">
|
|
<Heading>Book a Fitting</Heading>
|
|
<Subheading className="mt-4">
|
|
Schedule a personalized session with our footwear experts.
|
|
</Subheading>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<div className="lg:col-span-2 bg-white p-8 rounded-3xl shadow-sm border">
|
|
<KleapForm
|
|
formId="booking"
|
|
title="Book Your Session"
|
|
fields={bookingFields}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<div className="bg-neutral-50 p-6 rounded-2xl border">
|
|
<h3 className="font-bold text-lg mb-4">Why book a fitting?</h3>
|
|
<ul className="space-y-4 text-sm text-neutral-600">
|
|
<li className="flex gap-3">
|
|
<span className="text-primary font-bold">01</span>
|
|
Precise measurements for ultimate comfort.
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="text-primary font-bold">02</span>
|
|
Expert advice on styles that suit your gait.
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="text-primary font-bold">03</span>
|
|
Early access to new collections.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="bg-neutral-900 text-white p-6 rounded-2xl">
|
|
<h3 className="font-bold text-lg mb-4">Need help?</h3>
|
|
<p className="text-sm text-neutral-400 mb-4">
|
|
If you have any questions about our custom services, feel free to reach out.
|
|
</p>
|
|
<p className="font-bold">+1 (555) 123-4567</p>
|
|
<p className="text-sm text-neutral-400">support@solevibe.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|