Update src/app/page.tsx

Merge version_3 into main

src/app/booking/page.tsx

@@ -5,8 +5,21 @@ import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
+import { useState } from "react";
 
 export default function BookingPage() {
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  const getSlots = (date: Date) => {
+    const day = date.getDay(); // 0 is Sunday
+    const endHour = day === 0 ? 18 : 19;
+    const slots = [];
+    for (let hour = 8; hour < endHour; hour++) {
+      slots.push(`${hour}:00`);
+    }
+    return slots;
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
@@ -33,12 +46,15 @@ export default function BookingPage() {
             brandName="Cut Creation Barbers"
           />
         </div>
-        <div style={{ minHeight: "60vh", display: "flex", alignItems: "center", justifyContent: "center", padding: "4rem" }}>
+        <div style={{ minHeight: "60vh", padding: "8rem 2rem", textAlign: "center" }}>
-          <ContactText 
+          <h2 style={{ marginBottom: "2rem" }}>Select a Time Slot</h2>
-             text="Booking System Integration Coming Soon. Please contact us directly for appointments in the meantime."
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))", gap: "1rem", maxWidth: "600px", margin: "0 auto" }}>
-             background={{ variant: "plain" }}
+            {getSlots(selectedDate).map((slot) => (
-             useInvertedBackground={false}
+              <button key={slot} style={{ padding: "1rem", border: "1px solid #ccc", borderRadius: "8px", cursor: "pointer" }}>
-          />
+                {slot}
+              </button>
+            ))}
+          </div>
         </div>
         <div id="footer">
             <FooterCard