Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
109
src/app/appointments/page.tsx
Normal file
109
src/app/appointments/page.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import { useState } from 'react';
|
||||
import { CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function AppointmentsPage() {
|
||||
const [isBooked, setIsBooked] = useState(false);
|
||||
const [formData, setFormData] = useState<Record<string, string>>({});
|
||||
|
||||
const handleSubmit = (data: Record<string, string>) => {
|
||||
setFormData(data);
|
||||
setIsBooked(true);
|
||||
// In a real app, you would send this data to a backend for actual booking
|
||||
console.log("Booking data:", data);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About Us", id: "/#about" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Reviews", id: "/#reviews" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Contact", id: "/#contact" },
|
||||
{ name: "Book Now", id: "/appointments" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/plug-hybrid-electric-vehicle-using-batteries-fuel-power-electric-motor_482257-118136.jpg"
|
||||
brandName="ABC Movers Riverside"
|
||||
button={{ text: "Get a Free Quote", href: "/#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="relative z-10">
|
||||
{!isBooked ? (
|
||||
<div id="booking-form" data-section="booking-form" className="py-24 sm:py-32 lg:py-40">
|
||||
<ContactSplitForm
|
||||
title="Schedule Your Moving Appointment"
|
||||
description="Fill out the form below to book your moving consultation. Choose your preferred date and time, and we'll confirm within 24 hours. Our team will contact you to finalize the details."
|
||||
inputs={[
|
||||
{ name: "fullName", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
||||
{ name: "movingDate", type: "date", placeholder: "Preferred Moving Date", required: true },
|
||||
{ name: "movingFrom", type: "text", placeholder: "Current Address (City, State)", required: true },
|
||||
{ name: "movingTo", type: "text", placeholder: "New Address (City, State)", required: true }
|
||||
]}
|
||||
multiSelect={{
|
||||
name: "timeSlot", label: "Preferred Time Slot", options: ["Morning (8 AM - 12 PM)", "Afternoon (1 PM - 5 PM)", "Evening (5 PM - 8 PM)"]
|
||||
}}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us more about your move (e.g., number of rooms, special items)", rows: 4
|
||||
}}
|
||||
buttonText="Confirm Appointment"
|
||||
onSubmit={handleSubmit}
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/two-men-wearing-overalls-using-radio-walking-warehouse_482257-19045.jpg"
|
||||
imageAlt="Movers coordinating a job"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div id="booking-confirmation" data-section="booking-confirmation" className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="bg-card p-8 rounded-lg shadow-xl text-center max-w-md w-full">
|
||||
<CheckCircle className="mx-auto h-16 w-16 text-primary-cta" />
|
||||
<h2 className="mt-6 text-3xl font-bold text-foreground">Appointment Confirmed!</h2>
|
||||
<p className="mt-4 text-lg text-foreground/80">Thank you, {formData.fullName || 'Valued Customer'}!</p>
|
||||
<p className="mt-2 text-foreground/70">Your appointment request for {formData.movingDate} at {formData.timeSlot} has been received. We will contact you shortly at {formData.email} or {formData.phone} to finalize the details.</p>
|
||||
<a href="/" className="mt-8 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-pill shadow-sm text-white bg-primary-cta hover:bg-primary-cta/90 transition-colors">
|
||||
Go to Home Page
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoSrc="http://img.b2bpic.net/free-photo/plug-hybrid-electric-vehicle-using-batteries-fuel-power-electric-motor_482257-118136.jpg"
|
||||
logoText="ABC Movers Riverside"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Terms of Service", href: "/terms" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
75
src/app/booking/page.tsx
Normal file
75
src/app/booking/page.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroSignup from '@/components/sections/hero/HeroSignup';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function BookingPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "#home" },
|
||||
{ name: "About Us", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Reviews", id: "#reviews" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
{ name: "Book Now", id: "/booking" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/plug-hybrid-electric-vehicle-using-batteries-fuel-power-electric-motor_482257-118136.jpg"
|
||||
brandName="ABC Movers Riverside"
|
||||
button={{
|
||||
text: "Get a Free Quote", href: "/booking"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-hero" data-section="booking-hero">
|
||||
<HeroSignup
|
||||
tag="Easy Booking"
|
||||
title="Schedule Your Move Today!"
|
||||
description="Fill out the form below to get a personalized quote and book your hassle-free moving appointment."
|
||||
inputPlaceholder="Your Email"
|
||||
buttonText="Submit Booking Request"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
onSubmit={(email) => {
|
||||
console.log("Booking email submitted:", email);
|
||||
alert(`Booking request for ${email} received! We'll contact you soon.`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoSrc="http://img.b2bpic.net/free-photo/plug-hybrid-electric-vehicle-using-batteries-fuel-power-electric-motor_482257-118136.jpg"
|
||||
logoText="ABC Movers Riverside"
|
||||
leftLink={{
|
||||
text: "Privacy Policy", href: "#"
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service", href: "#"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -44,11 +44,13 @@ export default function LandingPage() {
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{
|
||||
name: "Book Now", id: "/booking"},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/plug-hybrid-electric-vehicle-using-batteries-fuel-power-electric-motor_482257-118136.jpg"
|
||||
brandName="ABC Movers Riverside"
|
||||
button={{
|
||||
text: "Get a Free Quote", href: "#contact"}}
|
||||
text: "Get a Free Quote", href: "/booking"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -135,17 +137,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "apartment-move", name: "Apartment Move", price: "Starting at $399", imageSrc: "http://img.b2bpic.net/free-photo/romantic-people-relaxing-together-living-room-floor-talking-about-decorations-future-family-enjoying-relocation-taking-break-after-moving-relationship-achievement-top-view_482257-44774.jpg", imageAlt: "Movers carrying sofa into apartment"},
|
||||
id: "apartment-move", name: "Apartment Move", price: "Starting at $399", imageSrc: "http://img.b2bpic.net/free-photo/romantic-people-relaxing-together-living-room-floor-talking-about-decorations-future-family-enjoying-relocation-taking-break-after-moving-relationship-achievement-top-view_482257-44774.jpg", imageAlt: "Movers carrying sofa into apartment", priceButtonProps: { text: "Book Now", href: "/booking"}},
|
||||
{
|
||||
id: "house-relocation", name: "House Relocation", price: "Starting at $799", imageSrc: "http://img.b2bpic.net/free-photo/woman-handling-belongings-cardboard-boxes-moving-new-house_23-2149086804.jpg", imageAlt: "Family house moving truck"},
|
||||
id: "house-relocation", name: "House Relocation", price: "Starting at $799", imageSrc: "http://img.b2bpic.net/free-photo/woman-handling-belongings-cardboard-boxes-moving-new-house_23-2149086804.jpg", imageAlt: "Family house moving truck", priceButtonProps: { text: "Book Now", href: "/booking"}},
|
||||
{
|
||||
id: "office-move", name: "Office Move", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/top-view-warehouse-supervisor-packing-client-clothes-order-cardboard-box-while-checking-shipping-details-laptop-computer-team-working-storehouse-delivery-department_482257-66036.jpg", imageAlt: "Office furniture movers"},
|
||||
id: "office-move", name: "Office Move", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/top-view-warehouse-supervisor-packing-client-clothes-order-cardboard-box-while-checking-shipping-details-laptop-computer-team-working-storehouse-delivery-department_482257-66036.jpg", imageAlt: "Office furniture movers", priceButtonProps: { text: "Book Now", href: "/booking"}},
|
||||
{
|
||||
id: "packing-service", name: "Full Packing Service", price: "Per Hour + Materials", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-carrying-things-box_23-2147782375.jpg", imageAlt: "Packing fragile items"},
|
||||
id: "packing-service", name: "Full Packing Service", price: "Per Hour + Materials", imageSrc: "http://img.b2bpic.net/free-photo/crop-man-carrying-things-box_23-2147782375.jpg", imageAlt: "Packing fragile items", priceButtonProps: { text: "Book Now", href: "/booking"}},
|
||||
{
|
||||
id: "storage-solutions", name: "Secure Storage", price: "Starting at $99/month", imageSrc: "http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725266.jpg", imageAlt: "Storage unit interior"},
|
||||
id: "storage-solutions", name: "Secure Storage", price: "Starting at $99/month", imageSrc: "http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725266.jpg", imageAlt: "Storage unit interior", priceButtonProps: { text: "Book Now", href: "/booking"}},
|
||||
{
|
||||
id: "specialty-transport", name: "Specialty Item Transport", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/young-delivery-man-blue-polo-blue-cap-white-jeans-backpack-holding-box-yellow_140725-14687.jpg", imageAlt: "Movers transporting a piano"},
|
||||
id: "specialty-transport", name: "Specialty Item Transport", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/young-delivery-man-blue-polo-blue-cap-white-jeans-backpack-holding-box-yellow_140725-14687.jpg", imageAlt: "Movers transporting a piano", priceButtonProps: { text: "Book Now", href: "/booking"}},
|
||||
]}
|
||||
title="Our Tailored Moving & Storage Packages"
|
||||
description="Choose from our flexible service options designed to fit your budget and specific relocation requirements. We offer transparent pricing with no hidden fees."
|
||||
@@ -214,10 +216,10 @@ export default function LandingPage() {
|
||||
variant: "radial-gradient"}}
|
||||
tag="Contact Us"
|
||||
title="Ready for a Smooth, Stress-Free Move?"
|
||||
description="Get your free, no-obligation moving quote today! Our friendly team is ready to assist you with personalized service and expert advice."
|
||||
description="Get your free, no-obligation moving quote or book your appointment today! Our friendly team is ready to assist you with personalized service and expert advice and explore flexible appointment booking options."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get My Free Quote", href: "#"},
|
||||
text: "Get My Free Quote", href: "/booking"},
|
||||
{
|
||||
text: "Call Now: (800) 771-0151", href: "tel:+18007710151"},
|
||||
]}
|
||||
@@ -237,4 +239,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user