Switch to version 1: remove src/app/booking/page.tsx
This commit is contained in:
@@ -1,159 +0,0 @@
|
||||
"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