app/(auth)/login/page.tsx

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

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

@@ -78,8 +78,9 @@ export default function BookNowPage() {
     lastName: "",
     email: "",
     phone: "",
-    preferredDays: [] as string[],
+    appointmentType: "",
-    preferredTimes: [] as string[],
+    preferredDate: "",
+    preferredTime: "",
     message: "",
   });
   const [loading, setLoading] = useState(false);
@@ -104,41 +105,17 @@ export default function BookNowPage() {
     setError(null);
 
     try {
-      if (formData.preferredDays.length === 0) {
+      // Convert time to 24-hour format for ISO string
-        setError("Please select at least one available day.");
+      const time24 = formData.preferredTime.includes("PM") 
-        setLoading(false);
+        ? formData.preferredTime.replace("PM", "").trim().split(":").map((v, i) => 
-        return;
+            i === 0 ? (parseInt(v) === 12 ? 12 : parseInt(v) + 12) : v
-      }
+          ).join(":")
-
+        : formData.preferredTime.replace("AM", "").trim().split(":").map((v, i) => 
-      if (formData.preferredTimes.length === 0) {
+            i === 0 ? (parseInt(v) === 12 ? "00" : v.padStart(2, "0")) : v
-        setError("Please select at least one preferred time.");
+          ).join(":");
-        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 = `${dateString}T${time24}:00Z`;
+      const dateTimeString = `${formData.preferredDate}T${time24}:00Z`;
       
       // Prepare request payload
       const payload = {
@@ -146,10 +123,9 @@ 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 || "",
       };
 
@@ -223,24 +199,6 @@ 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", {
@@ -261,7 +219,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="/session.jpg"
+              src="/section-image.png"
               alt="Therapy session with diverse clients"
               fill
               className="object-cover"
@@ -409,8 +367,9 @@ export default function BookNowPage() {
                               lastName: "",
                               email: "",
                               phone: "",
-                              preferredDays: [],
+                              appointmentType: "",
-                              preferredTimes: [],
+                              preferredDate: "",
+                              preferredTime: "",
                               message: "",
                             });
                           }}
@@ -531,75 +490,92 @@ export default function BookNowPage() {
                       Appointment Details
                     </h2>
 
-                    <div className="space-y-4">
                     <div className="space-y-2">
                       <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'}`} />
-                          Available Days *
+                          Preferred Date *
                         </label>
-                        <div className="flex flex-wrap gap-3">
+                        <Input
-                          {['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day) => (
+                          id="preferredDate"
-                            <label
+                          type="date"
-                              key={day}
+                          value={formData.preferredDate}
-                              className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${
+                          onChange={(e) =>
-                                formData.preferredDays.includes(day)
+                            handleChange("preferredDate", e.target.value)
-                                  ? isDark
+                          }
-                                    ? 'bg-rose-600 border-rose-500 text-white'
+                          required
-                                    : 'bg-rose-500 border-rose-500 text-white'
+                          min={new Date().toISOString().split("T")[0]}
-                                  : isDark
+                          className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300 text-gray-900'}`}
-                                  ? '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>
-                        <div className="flex flex-wrap gap-3">
+                        <Select
-                          {[
+                          value={formData.preferredTime}
-                            { value: 'morning', label: 'Morning' },
+                          onValueChange={(value) =>
-                            { value: 'lunchtime', label: 'Lunchtime' },
+                            handleChange("preferredTime", value)
-                            { value: 'afternoon', label: 'Afternoon' }
+                          }
-                          ].map((time) => (
+                          required
-                            <label
-                              key={time.value}
-                              className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${
-                                formData.preferredTimes.includes(time.value)
-                                  ? isDark
-                                    ? 'bg-rose-600 border-rose-500 text-white'
-                                    : 'bg-rose-500 border-rose-500 text-white'
-                                  : 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
+                          <SelectTrigger id="preferredTime" className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300 text-gray-900'}`}>
-                                type="checkbox"
+                            <SelectValue placeholder="Select time" />
-                                checked={formData.preferredTimes.includes(time.value)}
+                          </SelectTrigger>
-                                onChange={() => handleTimeToggle(time.value)}
+                          <SelectContent className={isDark ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-300'}>
-                                className="sr-only"
+                            <SelectItem value="9:00 AM">9:00 AM</SelectItem>
-                              />
+                            <SelectItem value="10:00 AM">10:00 AM</SelectItem>
-                              <span className="text-sm font-medium">{time.label}</span>
+                            <SelectItem value="11:00 AM">11:00 AM</SelectItem>
-                            </label>
+                            <SelectItem value="12:00 PM">12:00 PM</SelectItem>
-                          ))}
+                            <SelectItem value="1:00 PM">1:00 PM</SelectItem>
-                        </div>
+                            <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>
+                            <SelectItem value="5:00 PM">5:00 PM</SelectItem>
+                          </SelectContent>
+                        </Select>
                       </div>
                     </div>
                   </div>

components/ClientFocus.tsx

@@ -5,7 +5,6 @@ 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);
@@ -95,7 +94,7 @@ export function ClientFocus() {
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.8, delay: 0.2 }}
           >
-            Who We Serve
+            Client Focus
           </motion.h2>
         </motion.div>
 
@@ -152,26 +151,52 @@ 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">
-              <h3 className="text-xl font-semibold text-foreground text-center justify-center">Providing Support to all of South Florida's Diverse Communities</h3>
+                <Globe className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Client Focus</h3>
             </div>
             <div className="space-y-3">
-              <div className="flex justify-center items-center">
+              <div className="flex flex-wrap gap-3 justify-center items-center">
+                {[
+                  { flag: '🇭🇹', name: 'Haitian', type: 'emoji' },
+                  { flag: '🇯🇲', name: 'Jamaican', type: 'emoji' },
+                  { flag: '🇧🇸', name: 'Bahamian', type: 'emoji' },
+                  { flag: 'pan-african', name: 'Pan-African', type: 'css' },
+                  { flag: '🇮🇱', name: 'Israeli', type: 'emoji' },
+                  { flag: '🇻🇪', name: 'Venezuelan', type: 'emoji' },
+                  { flag: 'pride', name: 'LGBTQ+', type: 'css' },
+                ].map((community, index) => (
                   <motion.div
+                    key={community.name}
                     initial={{ opacity: 0, scale: 0.8 }}
                     animate={isInView ? { opacity: 1, scale: 1 } : {}}
-                  transition={{ duration: 0.5, delay: 0.5 }}
+                    transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
-                  className="relative w-full max-w-md h-auto"
+                    className="p-2 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-colors"
+                    title={community.name}
                   >
-                  <Image
+                    {community.type === 'emoji' ? (
-                    src="/flagss.png"
+                      <span className="text-2xl sm:text-3xl" role="img" aria-label={community.name}>
-                    alt="Organization of American States Flags"
+                        {community.flag}
-                    width={400}
+                      </span>
-                    height={267}
+                    ) : community.flag === 'pan-african' ? (
-                    className="w-full h-auto object-contain rounded-lg"
+                      <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">
-                    priority
+                        <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('/large.jpeg')`,
+          backgroundImage: `url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',