Add src/app/appointments/page.tsx

2026-05-28 16:41:12 +00:00
parent f127fa856c
commit 5c91791086
1 changed files with 109 additions and 0 deletions
--- a/src/app/appointments/page.tsx
+++ b/src/app/appointments/page.tsx
@@ -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>
+  );
+}