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