Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
2026-05-28 16:41:15 +00:00
3 changed files with 196 additions and 10 deletions

View 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
View 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>
);
}

View File

@@ -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>
);
}
}