Add src/app/booking/page.tsx
This commit is contained in:
159
src/app/booking/page.tsx
Normal file
159
src/app/booking/page.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||||
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||||
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||||
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||||
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||||
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import { CalendarCheck, Clock, ArrowRight, CircleDollarSign, CheckCircle, MessageSquare, Hourglass, BellRing } from "lucide-react";
|
||||||
|
|
||||||
|
export default function BookingPage() {
|
||||||
|
const navItemsBooking = [
|
||||||
|
{ name: "Booking Process", id: "booking-process" },
|
||||||
|
{ name: "FAQs", id: "booking-faqs" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const bookingFeatures = [
|
||||||
|
{
|
||||||
|
title: "Real-time Availability", description: "View and select slots that are instantly updated across our schedule, ensuring you always see what's truly open.", icon: Clock,
|
||||||
|
mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp?_wi=1" }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Interactive Calendar", description: "Easily navigate through dates and times with a user-friendly calendar interface. Select your preferred slot with a tap.", icon: CalendarCheck,
|
||||||
|
mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif?_wi=1" }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Multi-step Reservation", description: "Our guided booking flow makes reservations simple, breaking it down into clear, easy-to-follow steps.", icon: ArrowRight,
|
||||||
|
mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp?_wi=1" }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Instant Confirmation", description: "Receive immediate confirmation of your booking, along with all the details you need, sent directly to your email.", icon: CheckCircle,
|
||||||
|
mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif?_wi=1" }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Appointment Reminders", description: "Never miss an appointment with automated reminders sent to your preferred communication channel.", icon: BellRing,
|
||||||
|
mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif?_wi=1" }]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const bookingFaqs = [
|
||||||
|
{
|
||||||
|
id: "1", title: "How do I view available booking slots?", content: "Simply select your desired service, and our interactive calendar will display all real-time available slots. Click on a date to see times."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", title: "Can I reschedule or cancel my appointment?", content: "Yes, you can easily reschedule or cancel your appointment through your booking confirmation email or by logging into your account. Please refer to our cancellation policy for details."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", title: "What happens after I complete my reservation?", content: "Upon successful reservation, you'll receive an instant confirmation email with all appointment details. We'll also send reminders closer to your booking time."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4", title: "Do you support group bookings?", content: "Currently, our system supports individual bookings. For group reservations, please contact our support team directly."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5", title: "Is there a waiting list for fully booked slots?", content: "We do not currently offer an automated waiting list. We recommend checking back regularly as availability can change."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const footerColumns = [
|
||||||
|
{
|
||||||
|
title: "Services", items: [
|
||||||
|
{ label: "Book Now", href: "/booking#booking-form" },
|
||||||
|
{ label: "Pricing", href: "/#pricing" },
|
||||||
|
{ label: "Features", href: "/#features" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Company", items: [
|
||||||
|
{ label: "About Us", href: "/#about" }, { label: "Contact", href: "/#contact" },
|
||||||
|
{ label: "Careers", href: "#" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="icon-arrow"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="rounded"
|
||||||
|
contentWidth="medium"
|
||||||
|
sizing="medium"
|
||||||
|
background="none"
|
||||||
|
cardStyle="gradient-bordered"
|
||||||
|
primaryButtonStyle="gradient"
|
||||||
|
secondaryButtonStyle="layered"
|
||||||
|
headingFontWeight="semibold"
|
||||||
|
>
|
||||||
|
<NavbarStyleFullscreen
|
||||||
|
navItems={navItemsBooking}
|
||||||
|
brandName="AgentFlow"
|
||||||
|
bottomLeftText="Book Your Slot"
|
||||||
|
bottomRightText="hello@agentflow.ai"
|
||||||
|
/>
|
||||||
|
<HeroBillboard
|
||||||
|
tag="Live Booking"
|
||||||
|
tagIcon={CalendarCheck}
|
||||||
|
title="Experience Seamless Online Reservations"
|
||||||
|
description="Book your preferred services with real-time availability, instant confirmation, and an intuitive, animated flow designed for your convenience."
|
||||||
|
buttons={[
|
||||||
|
{ text: "Book Now", href: "#booking-form" },
|
||||||
|
{ text: "Back to Home", href: "/" }
|
||||||
|
]}
|
||||||
|
background={{ variant: "radial-gradient" }}
|
||||||
|
imageSrc="https://images.unsplash.com/photo-1556742526-70e28151522f?w=1200&h=800&fit=crop&q=80"
|
||||||
|
imageAlt="Booking calendar interface"
|
||||||
|
/>
|
||||||
|
<div id="booking-process">
|
||||||
|
<FeatureCardTwentyFive
|
||||||
|
features={bookingFeatures}
|
||||||
|
animationType="slide-up"
|
||||||
|
tag="How It Works"
|
||||||
|
tagIcon={Hourglass}
|
||||||
|
title="Your Multi-Step Reservation System"
|
||||||
|
description="From selecting your slot to receiving reminders, our booking process is designed for clarity and ease."
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="booking-form">
|
||||||
|
<ContactSplit
|
||||||
|
tag="Confirm Your Booking"
|
||||||
|
tagIcon={CircleDollarSign}
|
||||||
|
title="Secure Your Spot Instantly"
|
||||||
|
description="Fill in your details below to finalize your reservation. You'll receive an instant confirmation email with all the specifics."
|
||||||
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/e-commerce/contact.webp?_wi=1"
|
||||||
|
imageAlt="Confirmation screen"
|
||||||
|
mediaAnimation="slide-up"
|
||||||
|
mediaPosition="right"
|
||||||
|
inputPlaceholder="Enter your email for confirmation"
|
||||||
|
buttonText="Confirm Booking"
|
||||||
|
termsText="By clicking Confirm Booking, you agree to our terms and conditions for services."
|
||||||
|
background={{ variant: "sparkles-gradient" }}
|
||||||
|
useInvertedBackground={false}
|
||||||
|
onSubmit={(email) => console.log("Booking confirmed for:", email)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="booking-faqs">
|
||||||
|
<FaqSplitMedia
|
||||||
|
faqs={bookingFaqs}
|
||||||
|
tag="Booking Help"
|
||||||
|
tagIcon={MessageSquare}
|
||||||
|
title="Frequently Asked Questions About Booking"
|
||||||
|
description="Find answers to common questions regarding our reservation process, cancellations, and more."
|
||||||
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp?_wi=1"
|
||||||
|
imageAlt="Customer support"
|
||||||
|
mediaAnimation="slide-up"
|
||||||
|
mediaPosition="left"
|
||||||
|
faqsAnimation="slide-up"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FooterBaseCard
|
||||||
|
logoText="AgentFlow"
|
||||||
|
columns={footerColumns}
|
||||||
|
copyrightText="© 2025 AgentFlow. All rights reserved."
|
||||||
|
/>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user