Update login and book-now pages to enhance user experience by changing images for better representation, refactoring appointment scheduling to use preferred days and times, and improving error handling for user input.

app/(auth)/login/page.tsx

@@ -21,7 +21,7 @@ export default function Login() {
       {/* Background Image */}
       <div className="absolute inset-0 z-0">
         <Image
-          src="/section-image.png"
+          src="/woman.jpg"
           alt="Therapy and counseling session with African American clients"
           fill
           className="object-cover object-center"

app/(pages)/book-now/page.tsx

@@ -78,9 +78,8 @@ export default function BookNowPage() {
     lastName: "",
     email: "",
     phone: "",
-    appointmentType: "",
+    preferredDays: [] as string[],
-    preferredDate: "",
+    preferredTimes: [] as string[],
-    preferredTime: "",
     message: "",
   });
   const [loading, setLoading] = useState(false);
@@ -105,17 +104,41 @@ export default function BookNowPage() {
     setError(null);
 
     try {
-      // Convert time to 24-hour format for ISO string
+      if (formData.preferredDays.length === 0) {
-      const time24 = formData.preferredTime.includes("PM") 
+        setError("Please select at least one available day.");
-        ? formData.preferredTime.replace("PM", "").trim().split(":").map((v, i) => 
+        setLoading(false);
-            i === 0 ? (parseInt(v) === 12 ? 12 : parseInt(v) + 12) : v
+        return;
-          ).join(":")
+      }
-        : formData.preferredTime.replace("AM", "").trim().split(":").map((v, i) => 
+
-            i === 0 ? (parseInt(v) === 12 ? "00" : v.padStart(2, "0")) : v
+      if (formData.preferredTimes.length === 0) {
-          ).join(":");
+        setError("Please select at least one preferred time.");
+        setLoading(false);
+        return;
+      }
+
+      // For now, we'll use the first selected day and first selected time
+      // This can be adjusted based on your backend requirements
+      const firstDay = formData.preferredDays[0];
+      const firstTime = formData.preferredTimes[0];
+      const timeMap: { [key: string]: string } = {
+        morning: "09:00",
+        lunchtime: "12:00",
+        afternoon: "14:00",
+      };
+      const time24 = timeMap[firstTime] || "09:00";
+      
+      // Get next occurrence of the first selected day
+      const today = new Date();
+      const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+      const targetDayIndex = days.indexOf(firstDay);
+      let daysUntilTarget = (targetDayIndex - today.getDay() + 7) % 7;
+      if (daysUntilTarget === 0) daysUntilTarget = 7; // Next week if today
+      const targetDate = new Date(today);
+      targetDate.setDate(today.getDate() + daysUntilTarget);
+      const dateString = targetDate.toISOString().split("T")[0];
       
       // Combine date and time into scheduled_at (ISO format)
-      const dateTimeString = `${formData.preferredDate}T${time24}:00Z`;
+      const dateTimeString = `${dateString}T${time24}:00Z`;
       
       // Prepare request payload
       const payload = {
@@ -123,9 +146,10 @@ export default function BookNowPage() {
         last_name: formData.lastName,
         email: formData.email,
         phone: formData.phone,
-        appointment_type: formData.appointmentType,
         scheduled_at: dateTimeString,
         duration: 60, // Default to 60 minutes
+        preferred_days: formData.preferredDays,
+        preferred_times: formData.preferredTimes,
         notes: formData.message || "",
       };
 
@@ -199,6 +223,24 @@ export default function BookNowPage() {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handleDayToggle = (day: string) => {
+    setFormData((prev) => {
+      const days = prev.preferredDays.includes(day)
+        ? prev.preferredDays.filter((d) => d !== day)
+        : [...prev.preferredDays, day];
+      return { ...prev, preferredDays: days };
+    });
+  };
+
+  const handleTimeToggle = (time: string) => {
+    setFormData((prev) => {
+      const times = prev.preferredTimes.includes(time)
+        ? prev.preferredTimes.filter((t) => t !== time)
+        : [...prev.preferredTimes, time];
+      return { ...prev, preferredTimes: times };
+    });
+  };
+
   const formatDateTime = (dateString: string) => {
     const date = new Date(dateString);
     return date.toLocaleString("en-US", {
@@ -219,7 +261,7 @@ export default function BookNowPage() {
         <div className={`hidden lg:block fixed top-0 left-0 h-screen w-1/2 overflow-hidden z-10 bg-gradient-to-br ${isDark ? 'from-gray-900 via-gray-800 to-gray-900' : 'from-rose-100 via-pink-50 to-orange-50'}`}>
           <div className="absolute inset-0">
             <Image
-              src="/section-image.png"
+              src="/session.jpg"
               alt="Therapy session with diverse clients"
               fill
               className="object-cover"
@@ -367,9 +409,8 @@ export default function BookNowPage() {
                               lastName: "",
                               email: "",
                               phone: "",
-                              appointmentType: "",
+                              preferredDays: [],
-                              preferredDate: "",
+                              preferredTimes: [],
-                              preferredTime: "",
                               message: "",
                             });
                           }}
@@ -490,92 +531,75 @@ export default function BookNowPage() {
                       Appointment Details
                     </h2>
 
-                    <div className="space-y-2">
+                    <div className="space-y-4">
-                      <label
-                        htmlFor="appointmentType"
-                        className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
-                      >
-                        Appointment Type *
-                      </label>
-                      <Select
-                        value={formData.appointmentType}
-                        onValueChange={(value) =>
-                          handleChange("appointmentType", value)
-                        }
-                        required
-                      >
-                        <SelectTrigger id="appointmentType" className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300 text-gray-900'}`}>
-                          <SelectValue placeholder="Select appointment type" />
-                        </SelectTrigger>
-                        <SelectContent className={isDark ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-300'}>
-                          <SelectItem value="initial-consultation">
-                            Initial Consultation
-                          </SelectItem>
-                          <SelectItem value="individual-therapy">
-                            Individual Therapy
-                          </SelectItem>
-                          <SelectItem value="family-therapy">Family Therapy</SelectItem>
-                          <SelectItem value="couples-therapy">
-                            Couples Therapy
-                          </SelectItem>
-                          <SelectItem value="group-therapy">Group Therapy</SelectItem>
-                          <SelectItem value="follow-up">Follow-up Session</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div className="space-y-2">
                         <label
-                          htmlFor="preferredDate"
                           className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
                         >
                           <Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
-                          Preferred Date *
+                          Available Days *
                         </label>
-                        <Input
+                        <div className="flex flex-wrap gap-3">
-                          id="preferredDate"
+                          {['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day) => (
-                          type="date"
+                            <label
-                          value={formData.preferredDate}
+                              key={day}
-                          onChange={(e) =>
+                              className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${
-                            handleChange("preferredDate", e.target.value)
+                                formData.preferredDays.includes(day)
-                          }
+                                  ? isDark
-                          required
+                                    ? 'bg-rose-600 border-rose-500 text-white'
-                          min={new Date().toISOString().split("T")[0]}
+                                    : 'bg-rose-500 border-rose-500 text-white'
-                          className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300 text-gray-900'}`}
+                                  : isDark
-                        />
+                                  ? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-rose-500'
+                                  : 'bg-white border-gray-300 text-gray-700 hover:border-rose-500'
+                              }`}
+                            >
+                              <input
+                                type="checkbox"
+                                checked={formData.preferredDays.includes(day)}
+                                onChange={() => handleDayToggle(day)}
+                                className="sr-only"
+                              />
+                              <span className="text-sm font-medium">{day}</span>
+                            </label>
+                          ))}
+                        </div>
                       </div>
 
                       <div className="space-y-2">
                         <label
-                          htmlFor="preferredTime"
                           className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
                         >
                           <Clock className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
                           Preferred Time *
                         </label>
-                        <Select
+                        <div className="flex flex-wrap gap-3">
-                          value={formData.preferredTime}
+                          {[
-                          onValueChange={(value) =>
+                            { value: 'morning', label: 'Morning' },
-                            handleChange("preferredTime", value)
+                            { value: 'lunchtime', label: 'Lunchtime' },
-                          }
+                            { value: 'afternoon', label: 'Afternoon' }
-                          required
+                          ].map((time) => (
-                        >
+                            <label
-                          <SelectTrigger id="preferredTime" className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300 text-gray-900'}`}>
+                              key={time.value}
-                            <SelectValue placeholder="Select time" />
+                              className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${
-                          </SelectTrigger>
+                                formData.preferredTimes.includes(time.value)
-                          <SelectContent className={isDark ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-300'}>
+                                  ? isDark
-                            <SelectItem value="9:00 AM">9:00 AM</SelectItem>
+                                    ? 'bg-rose-600 border-rose-500 text-white'
-                            <SelectItem value="10:00 AM">10:00 AM</SelectItem>
+                                    : 'bg-rose-500 border-rose-500 text-white'
-                            <SelectItem value="11:00 AM">11:00 AM</SelectItem>
+                                  : isDark
-                            <SelectItem value="12:00 PM">12:00 PM</SelectItem>
+                                  ? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-rose-500'
-                            <SelectItem value="1:00 PM">1:00 PM</SelectItem>
+                                  : 'bg-white border-gray-300 text-gray-700 hover:border-rose-500'
-                            <SelectItem value="2:00 PM">2:00 PM</SelectItem>
+                              }`}
-                            <SelectItem value="3:00 PM">3:00 PM</SelectItem>
+                            >
-                            <SelectItem value="4:00 PM">4:00 PM</SelectItem>
+                              <input
-                            <SelectItem value="5:00 PM">5:00 PM</SelectItem>
+                                type="checkbox"
-                          </SelectContent>
+                                checked={formData.preferredTimes.includes(time.value)}
-                        </Select>
+                                onChange={() => handleTimeToggle(time.value)}
+                                className="sr-only"
+                              />
+                              <span className="text-sm font-medium">{time.label}</span>
+                            </label>
+                          ))}
+                        </div>
                       </div>
                     </div>
                   </div>

components/ClientFocus.tsx

@@ -5,6 +5,7 @@ import { useInView } from "framer-motion";
 import { useRef } from "react";
 import { Users, UserCheck, Globe } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
+import Image from "next/image";
 
 export function ClientFocus() {
   const ref = useRef(null);
@@ -94,7 +95,7 @@ export function ClientFocus() {
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.8, delay: 0.2 }}
           >
-            Client Focus
+            Who We Serve
           </motion.h2>
         </motion.div>
 
@@ -151,52 +152,26 @@ export function ClientFocus() {
             className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 hover:scale-105 transition-all duration-300"
           >
             <div className="flex items-center gap-3 mb-4">
-              <div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
+              
-                <Globe className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              <h3 className="text-xl font-semibold text-foreground text-center justify-center">Providing Support to all of South Florida's Diverse Communities</h3>
-              </div>
-              <h3 className="text-xl font-semibold text-foreground">Client Focus</h3>
             </div>
             <div className="space-y-3">
-              <div className="flex flex-wrap gap-3 justify-center items-center">
+              <div className="flex justify-center items-center">
-                {[
+                <motion.div
-                  { flag: '🇭🇹', name: 'Haitian', type: 'emoji' },
+                  initial={{ opacity: 0, scale: 0.8 }}
-                  { flag: '🇯🇲', name: 'Jamaican', type: 'emoji' },
+                  animate={isInView ? { opacity: 1, scale: 1 } : {}}
-                  { flag: '🇧🇸', name: 'Bahamian', type: 'emoji' },
+                  transition={{ duration: 0.5, delay: 0.5 }}
-                  { flag: 'pan-african', name: 'Pan-African', type: 'css' },
+                  className="relative w-full max-w-md h-auto"
-                  { flag: '🇮🇱', name: 'Israeli', type: 'emoji' },
+                >
-                  { flag: '🇻🇪', name: 'Venezuelan', type: 'emoji' },
+                  <Image
-                  { flag: 'pride', name: 'LGBTQ+', type: 'css' },
+                    src="/flagss.png"
-                ].map((community, index) => (
+                    alt="Organization of American States Flags"
-                  <motion.div
+                    width={400}
-                    key={community.name}
+                    height={267}
-                    initial={{ opacity: 0, scale: 0.8 }}
+                    className="w-full h-auto object-contain rounded-lg"
-                    animate={isInView ? { opacity: 1, scale: 1 } : {}}
+                    priority
-                    transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
+                  />
-                    className="p-2 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-colors"
+                </motion.div>
-                    title={community.name}
-                  >
-                    {community.type === 'emoji' ? (
-                      <span className="text-2xl sm:text-3xl" role="img" aria-label={community.name}>
-                        {community.flag}
-                      </span>
-                    ) : community.flag === 'pan-african' ? (
-                      <div className="w-8 h-6 sm:w-10 sm:h-7 rounded border border-gray-300 dark:border-gray-600 overflow-hidden flex flex-col">
-                        <div className="h-1/3 bg-red-600"></div>
-                        <div className="h-1/3 bg-black"></div>
-                        <div className="h-1/3 bg-green-600"></div>
-                      </div>
-                    ) : community.flag === 'pride' ? (
-                      <div className="w-8 h-6 sm:w-10 sm:h-7 rounded border border-gray-300 dark:border-gray-600 overflow-hidden flex flex-col">
-                        <div className="h-1/6 bg-red-500"></div>
-                        <div className="h-1/6 bg-orange-500"></div>
-                        <div className="h-1/6 bg-yellow-400"></div>
-                        <div className="h-1/6 bg-green-500"></div>
-                        <div className="h-1/6 bg-blue-500"></div>
-                        <div className="h-1/6 bg-purple-600"></div>
-                      </div>
-                    ) : null}
-                  </motion.div>
-                ))}
               </div>
             </div>
           </motion.div>

components/Hero.tsx

@@ -18,7 +18,7 @@ export function HeroSection() {
       <div 
         className="absolute inset-0 z-0"
         style={{
-          backgroundImage: `url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
+          backgroundImage: `url('/large.jpeg')`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',