Add src/app/book-appointment/page.tsx

src/app/book-appointment/page.tsx

@@ -0,0 +1,352 @@
+"use client";
+import { useState } from "react";
+import { Calendar, Phone, Mail, User, MessageSquare } from "lucide-react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import Textarea from "@/components/form/Textarea";
+
+interface FormData {
+  fullName: string;
+  email: string;
+  phone: string;
+  serviceType: string;
+  preferredDate: string;
+  preferredTime: string;
+  message: string;
+}
+
+interface FormErrors {
+  [key: string]: string;
+}
+
+export default function BookAppointmentPage() {
+  const [formData, setFormData] = useState<FormData>({
+    fullName: "",    email: "",    phone: "",    serviceType: "",    preferredDate: "",    preferredTime: "",    message: ""});
+
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [submitted, setSubmitted] = useState(false);
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.fullName.trim()) {
+      newErrors.fullName = "Full name is required";
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = "Please enter a valid email address";
+    }
+
+    if (!formData.phone.trim()) {
+      newErrors.phone = "Phone number is required";
+    } else if (!/^[\d\s\-\+\(\)]+$/.test(formData.phone) || formData.phone.replace(/\D/g, "").length < 9) {
+      newErrors.phone = "Please enter a valid phone number";
+    }
+
+    if (!formData.serviceType) {
+      newErrors.serviceType = "Please select a service";
+    }
+
+    if (!formData.preferredDate) {
+      newErrors.preferredDate = "Please select a preferred date";
+    }
+
+    if (!formData.preferredTime) {
+      newErrors.preferredTime = "Please select a preferred time";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (validateForm()) {
+      setSubmitted(true);
+      setFormData({
+        fullName: "",        email: "",        phone: "",        serviceType: "",        preferredDate: "",        preferredTime: "",        message: ""});
+
+      setTimeout(() => {
+        setSubmitted(false);
+      }, 5000);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (errors[name]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[name];
+        return newErrors;
+      });
+    }
+  };
+
+  const handleTextareaChange = (value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      message: value,
+    }));
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Rehoboth Dental"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Book Appointment", href: "/book-appointment" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="booking" data-section="booking" className="min-h-screen bg-background py-20 px-4 md:px-8">
+        <div className="max-w-2xl mx-auto">
+          <div className="mb-12 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Book Your Appointment</h1>
+            <p className="text-lg text-foreground/70">Schedule your visit to Rehoboth Dental Clinic</p>
+          </div>
+
+          {submitted && (
+            <div className="mb-8 p-6 bg-green-50 border border-green-200 rounded-lg">
+              <p className="text-green-800 font-medium">✓ Your appointment request has been submitted successfully! We'll contact you shortly to confirm your booking.</p>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="bg-card rounded-lg p-8 md:p-12 shadow-lg border border-background-accent">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+              {/* Full Name */}
+              <div>
+                <label className="block text-foreground font-medium mb-2 flex items-center gap-2">
+                  <User size={18} />
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  name="fullName"
+                  value={formData.fullName}
+                  onChange={handleChange}
+                  className={`w-full px-4 py-3 bg-background border rounded-lg focus:outline-none transition ${
+                    errors.fullName
+                      ? "border-red-500 focus:ring-2 focus:ring-red-200"
+                      : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
+                  } text-foreground placeholder-foreground/50`}
+                  placeholder="Enter your full name"
+                />
+                {errors.fullName && <p className="text-red-600 text-sm mt-2">{errors.fullName}</p>}
+              </div>
+
+              {/* Email */}
+              <div>
+                <label className="block text-foreground font-medium mb-2 flex items-center gap-2">
+                  <Mail size={18} />
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className={`w-full px-4 py-3 bg-background border rounded-lg focus:outline-none transition ${
+                    errors.email
+                      ? "border-red-500 focus:ring-2 focus:ring-red-200"
+                      : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
+                  } text-foreground placeholder-foreground/50`}
+                  placeholder="your.email@example.com"
+                />
+                {errors.email && <p className="text-red-600 text-sm mt-2">{errors.email}</p>}
+              </div>
+
+              {/* Phone */}
+              <div>
+                <label className="block text-foreground font-medium mb-2 flex items-center gap-2">
+                  <Phone size={18} />
+                  Phone Number
+                </label>
+                <input
+                  type="tel"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleChange}
+                  className={`w-full px-4 py-3 bg-background border rounded-lg focus:outline-none transition ${
+                    errors.phone
+                      ? "border-red-500 focus:ring-2 focus:ring-red-200"
+                      : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
+                  } text-foreground placeholder-foreground/50`}
+                  placeholder="+250 792 891 566"
+                />
+                {errors.phone && <p className="text-red-600 text-sm mt-2">{errors.phone}</p>}
+              </div>
+
+              {/* Service Type */}
+              <div>
+                <label className="block text-foreground font-medium mb-2 flex items-center gap-2">
+                  <Stethoscope size={18} />
+                  Service Type
+                </label>
+                <select
+                  name="serviceType"
+                  value={formData.serviceType}
+                  onChange={handleChange}
+                  className={`w-full px-4 py-3 bg-background border rounded-lg focus:outline-none transition ${
+                    errors.serviceType
+                      ? "border-red-500 focus:ring-2 focus:ring-red-200"
+                      : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
+                  } text-foreground`}
+                >
+                  <option value="">Select a service...</option>
+                  <option value="checkup">General Dental Checkup</option>
+                  <option value="cleaning">Professional Teeth Cleaning</option>
+                  <option value="filling">Tooth Filling & Restoration</option>
+                  <option value="extraction">Tooth Extraction</option>
+                  <option value="orthodontics">Braces & Orthodontics</option>
+                  <option value="whitening">Professional Teeth Whitening</option>
+                  <option value="emergency">Emergency Dental Care</option>
+                </select>
+                {errors.serviceType && <p className="text-red-600 text-sm mt-2">{errors.serviceType}</p>}
+              </div>
+
+              {/* Preferred Date */}
+              <div>
+                <label className="block text-foreground font-medium mb-2 flex items-center gap-2">
+                  <Calendar size={18} />
+                  Preferred Date
+                </label>
+                <input
+                  type="date"
+                  name="preferredDate"
+                  value={formData.preferredDate}
+                  onChange={handleChange}
+                  className={`w-full px-4 py-3 bg-background border rounded-lg focus:outline-none transition ${
+                    errors.preferredDate
+                      ? "border-red-500 focus:ring-2 focus:ring-red-200"
+                      : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
+                  } text-foreground`}
+                />
+                {errors.preferredDate && <p className="text-red-600 text-sm mt-2">{errors.preferredDate}</p>}
+              </div>
+
+              {/* Preferred Time */}
+              <div>
+                <label className="block text-foreground font-medium mb-2">Preferred Time</label>
+                <select
+                  name="preferredTime"
+                  value={formData.preferredTime}
+                  onChange={handleChange}
+                  className={`w-full px-4 py-3 bg-background border rounded-lg focus:outline-none transition ${
+                    errors.preferredTime
+                      ? "border-red-500 focus:ring-2 focus:ring-red-200"
+                      : "border-background-accent focus:ring-2 focus:ring-primary-cta/20"
+                  } text-foreground`}
+                >
+                  <option value="">Select a time...</option>
+                  <option value="08:00">8:00 AM</option>
+                  <option value="09:00">9:00 AM</option>
+                  <option value="10:00">10:00 AM</option>
+                  <option value="11:00">11:00 AM</option>
+                  <option value="12:00">12:00 PM</option>
+                  <option value="13:00">1:00 PM</option>
+                  <option value="14:00">2:00 PM</option>
+                  <option value="15:00">3:00 PM</option>
+                  <option value="16:00">4:00 PM</option>
+                  <option value="17:00">5:00 PM</option>
+                  <option value="18:00">6:00 PM</option>
+                  <option value="19:00">7:00 PM</option>
+                  <option value="20:00">8:00 PM</option>
+                </select>
+                {errors.preferredTime && <p className="text-red-600 text-sm mt-2">{errors.preferredTime}</p>}
+              </div>
+            </div>
+
+            {/* Message */}
+            <div className="mb-8">
+              <label className="block text-foreground font-medium mb-2 flex items-center gap-2">
+                <MessageSquare size={18} />
+                Additional Message (Optional)
+              </label>
+              <Textarea
+                value={formData.message}
+                onChange={handleTextareaChange}
+                placeholder="Tell us about any specific concerns or preferences..."
+                rows={5}
+              />
+            </div>
+
+            {/* Submit Button */}
+            <div className="flex gap-4">
+              <button
+                type="submit"
+                className="flex-1 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out"
+              >
+                Book Appointment
+              </button>
+              <button
+                type="reset"
+                onClick={() => {
+                  setFormData({
+                    fullName: "",                    email: "",                    phone: "",                    serviceType: "",                    preferredDate: "",                    preferredTime: "",                    message: ""});
+                  setErrors({});
+                }}
+                className="flex-1 bg-secondary-cta hover:bg-secondary-cta/90 text-foreground font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out border border-background-accent"
+              >
+                Clear Form
+              </button>
+            </div>
+          </form>
+
+          {/* Contact Info */}
+          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="bg-card rounded-lg p-6 text-center">
+              <Phone className="w-8 h-8 text-primary-cta mx-auto mb-3" />
+              <h3 className="text-foreground font-semibold mb-2">Call Us</h3>
+              <p className="text-foreground/70">+250 792 891 566</p>
+            </div>
+            <div className="bg-card rounded-lg p-6 text-center">
+              <Mail className="w-8 h-8 text-primary-cta mx-auto mb-3" />
+              <h3 className="text-foreground font-semibold mb-2">Email Us</h3>
+              <p className="text-foreground/70">info@rehobothdental.rw</p>
+            </div>
+            <div className="bg-card rounded-lg p-6 text-center">
+              <Calendar className="w-8 h-8 text-primary-cta mx-auto mb-3" />
+              <h3 className="text-foreground font-semibold mb-2">Clinic Hours</h3>
+              <p className="text-foreground/70">Mon-Sat: 8:00 AM - 8:00 PM</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Rehoboth Dental"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}