From 07ea177677acb79da0f30a18deed119642f1215f Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 21:00:41 +0000
Subject: [PATCH 1/3] Bob AI: Add booking page

---
 src/App.tsx               |  2 ++
 src/components/Layout.tsx |  4 ++-
 src/pages/BookingPage.tsx | 70 +++++++++++++++++++++++++++++++++++++++
 src/routes.ts             |  1 +
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/BookingPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..d0091ca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import BookingPage from "@/pages/BookingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/booking" element={<BookingPage />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 39f1219..07f2733 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Testimonials",
     "href": "#testimonials"
-  }
+  },
+  { name: "Booking", href: "/booking" },
+
 ];
 
   return (
diff --git a/src/pages/BookingPage.tsx b/src/pages/BookingPage.tsx
new file mode 100644
index 0000000..4cb11ea
--- /dev/null
+++ b/src/pages/BookingPage.tsx
@@ -0,0 +1,70 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+
+export default function BookingPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="Luxe Salon"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Book Now", href: "/booking" }}
+      />
+
+      <main className="flex-grow">
+        <HeroSplit
+          tag="Appointments"
+          title="Reserve Your Salon Experience"
+          description="Book your next haircut, color, or spa treatment with our expert stylists. We look forward to pampering you."
+          primaryButton={{ text: "View Services", href: "/services" }}
+          secondaryButton={{ text: "Call Us", href: "tel:+1234567890" }}
+          imageSrc="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=2074&auto=format&fit=crop"
+        />
+
+        <ContactSplitForm
+          tag="Reservation"
+          title="Request an Appointment"
+          description="Fill out the form below with your preferred details. Our team will contact you shortly to confirm your booking time."
+          inputs={[
+            { name: "name", 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: "date", type: "date", placeholder: "Preferred Date", required: true },
+            { name: "service", type: "text", placeholder: "Desired Service (e.g., Haircut, Balayage)", required: true }
+          ]}
+          textarea={{ name: "notes", placeholder: "Any special requests or notes for your stylist?", rows: 4, required: false }}
+          buttonText="Submit Booking Request"
+          imageSrc="https://images.unsplash.com/photo-1522337660859-02fbefca4702?q=80&w=2069&auto=format&fit=crop"
+        />
+
+        <FaqSimple
+          tag="FAQ"
+          title="Booking Policies"
+          description="Important information to know before your visit."
+          items={[
+            {
+              question: "What is your cancellation policy?",
+              answer: "We require at least 24 hours notice for any cancellations or rescheduling. Cancellations within 24 hours may be subject to a 50% cancellation fee."
+            },
+            {
+              question: "How early should I arrive for my appointment?",
+              answer: "Please arrive 10-15 minutes before your scheduled appointment time to check in, relax, and enjoy a complimentary beverage."
+            },
+            {
+              question: "Do you offer consultations before booking a major color change?",
+              answer: "Yes! We highly recommend booking a free 15-minute consultation prior to any major color correction or transformation to ensure we allocate enough time."
+            }
+          ]}
+        />
+      </main>
+
+      <FooterMinimal
+        brand="Luxe Salon"
+        copyright="© 2024 Luxe Salon. All rights reserved."
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..92323b0 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/booking', label: 'Booking', pageFile: 'BookingPage' },
 ];
-- 
2.49.1


From ebae2d609637b36c1aaee48f153805bafbeb3426 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 21:01:18 +0000
Subject: [PATCH 2/3] Bob AI: Populate src/pages/BookingPage.tsx (snippet
 builder, 3 sections)

---
 src/pages/BookingPage.tsx | 88 ++++++++++-----------------------------
 1 file changed, 23 insertions(+), 65 deletions(-)

diff --git a/src/pages/BookingPage.tsx b/src/pages/BookingPage.tsx
index 4cb11ea..224c0c2 100644
--- a/src/pages/BookingPage.tsx
+++ b/src/pages/BookingPage.tsx
@@ -1,70 +1,28 @@
-import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import HeroSplit from "@/components/sections/hero/HeroSplit";
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FaqSimple from "@/components/sections/faq/FaqSimple";
-import FooterMinimal from "@/components/sections/footer/FooterMinimal";
 
 export default function BookingPage() {
   return (
-    <div className="min-h-screen bg-background text-foreground flex flex-col">
-      <NavbarCentered
-        logo="Luxe Salon"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Book Now", href: "/booking" }}
-      />
-
-      <main className="flex-grow">
-        <HeroSplit
-          tag="Appointments"
-          title="Reserve Your Salon Experience"
-          description="Book your next haircut, color, or spa treatment with our expert stylists. We look forward to pampering you."
-          primaryButton={{ text: "View Services", href: "/services" }}
-          secondaryButton={{ text: "Call Us", href: "tel:+1234567890" }}
-          imageSrc="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=2074&auto=format&fit=crop"
-        />
-
-        <ContactSplitForm
-          tag="Reservation"
-          title="Request an Appointment"
-          description="Fill out the form below with your preferred details. Our team will contact you shortly to confirm your booking time."
-          inputs={[
-            { name: "name", 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: "date", type: "date", placeholder: "Preferred Date", required: true },
-            { name: "service", type: "text", placeholder: "Desired Service (e.g., Haircut, Balayage)", required: true }
-          ]}
-          textarea={{ name: "notes", placeholder: "Any special requests or notes for your stylist?", rows: 4, required: false }}
-          buttonText="Submit Booking Request"
-          imageSrc="https://images.unsplash.com/photo-1522337660859-02fbefca4702?q=80&w=2069&auto=format&fit=crop"
-        />
-
-        <FaqSimple
-          tag="FAQ"
-          title="Booking Policies"
-          description="Important information to know before your visit."
-          items={[
-            {
-              question: "What is your cancellation policy?",
-              answer: "We require at least 24 hours notice for any cancellations or rescheduling. Cancellations within 24 hours may be subject to a 50% cancellation fee."
-            },
-            {
-              question: "How early should I arrive for my appointment?",
-              answer: "Please arrive 10-15 minutes before your scheduled appointment time to check in, relax, and enjoy a complimentary beverage."
-            },
-            {
-              question: "Do you offer consultations before booking a major color change?",
-              answer: "Yes! We highly recommend booking a free 15-minute consultation prior to any major color correction or transformation to ensure we allocate enough time."
-            }
-          ]}
-        />
-      </main>
-
-      <FooterMinimal
-        brand="Luxe Salon"
-        copyright="© 2024 Luxe Salon. All rights reserved."
-      />
-    </div>
+    <>
+      <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Book Your Visit</p></div><TextAnimation text="Reserve Your Time to Unwind" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Take the first step toward relaxation. Choose your preferred service and let us take care of the rest." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Book Appointment" href="#booking-form" variant="primary" /><Button text="View Services" href="/services" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-woman-relaxing-spa-salon_23-2148206093.jpg" /></ScrollReveal></div></section></div>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book an Appointment"
+        title="Reserve Your Time to Unwind"
+        description="Take the first step towards relaxation. Fill out the form below to request an appointment with our expert stylists."
+        inputs={[{"name":"name","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":"date","type":"date","placeholder":"Preferred Date","required":true}]}
+        textarea={{"name":"message","placeholder":"Any special requests or preferred stylist?","rows":4,"required":false}}
+        buttonText="Request Booking"
+        imageSrc="https://img.freepik.com/free-photo/beautiful-woman-getting-spa-treatment_23-2148182280.jpg"
+      /></div>
+      <div data-webild-section="TeamOverlayCardsGrid"><section aria-label="Team section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Experts</p></div><TextAnimation text="Choose Your Specialist" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Select one of our talented professionals to begin your journey to relaxation and beauty." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Availability" href="#booking-calendar" variant="primary" /><Button variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mx-auto w-content-width"><div key="Elena M." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-smiling-young-woman-looking-camera_23-2148436701.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Elena M.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Master Stylist</p></div></div></div></div>
+<div key="Sarah P." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-young-woman-with-clean-fresh-skin_144627-25642.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Sarah P.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Color Specialist</p></div></div></div></div>
+<div key="Julia R." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-young-beautiful-woman-with-smoky-eyes-makeup-pretty-young-adult-girl-posing-studio-closeup-attractive-female-face_186202-4439.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Julia R.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Skincare Expert</p></div></div></div></div>
+<div key="Alice T." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-beautiful-young-woman-with-clean-fresh-skin_144627-25643.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Alice T.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Massage Therapist</p></div></div></div></div>
+<div key="Ben K." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/handsome-young-man-with-new-stylish-haircut_176420-19637.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Ben K.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Nail Technician</p></div></div></div></div></div></ScrollReveal></div></section></div>
+    </>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 3a91b04a461ee4d48b6c23dd3fa3ac568436545a Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 15 Jun 2026 21:02:17 +0000
Subject: [PATCH 3/3] Bob AI: fix build errors (attempt 1)

---
 src/pages/BookingPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/BookingPage.tsx b/src/pages/BookingPage.tsx
index 224c0c2..b0dbd4a 100644
--- a/src/pages/BookingPage.tsx
+++ b/src/pages/BookingPage.tsx
@@ -8,7 +8,7 @@ import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 export default function BookingPage() {
   return (
     <>
-      <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Book Your Visit</p></div><TextAnimation text="Reserve Your Time to Unwind" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Take the first step toward relaxation. Choose your preferred service and let us take care of the rest." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Book Appointment" href="#booking-form" variant="primary" /><Button text="View Services" href="/services" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-woman-relaxing-spa-salon_23-2148206093.jpg" /></ScrollReveal></div></section></div>
+      <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Book Your Visit</p></div><TextAnimation text="Reserve Your Time to Unwind" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Take the first step toward relaxation. Choose your preferred service and let us take care of the rest." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Book Appointment" href="#booking-form" variant="primary" /><Button text="View Services" href="/services" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-woman-relaxing-spa-salon_23-2148206093.jpg" /></ScrollReveal></div></section></div>
       <div data-webild-section="ContactSplitForm"><ContactSplitForm
         tag="Book an Appointment"
         title="Reserve Your Time to Unwind"
@@ -18,11 +18,11 @@ export default function BookingPage() {
         buttonText="Request Booking"
         imageSrc="https://img.freepik.com/free-photo/beautiful-woman-getting-spa-treatment_23-2148182280.jpg"
       /></div>
-      <div data-webild-section="TeamOverlayCardsGrid"><section aria-label="Team section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Experts</p></div><TextAnimation text="Choose Your Specialist" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Select one of our talented professionals to begin your journey to relaxation and beauty." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Availability" href="#booking-calendar" variant="primary" /><Button variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mx-auto w-content-width"><div key="Elena M." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-smiling-young-woman-looking-camera_23-2148436701.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Elena M.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Master Stylist</p></div></div></div></div>
+      <div data-webild-section="TeamOverlayCardsGrid"><section aria-label="Team section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Experts</p></div><TextAnimation text="Choose Your Specialist" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Select one of our talented professionals to begin your journey to relaxation and beauty." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Availability" href="#booking-calendar" variant="primary" /><Button text="Learn More" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mx-auto w-content-width"><div key="Elena M." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-smiling-young-woman-looking-camera_23-2148436701.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Elena M.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Master Stylist</p></div></div></div></div>
 <div key="Sarah P." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-young-woman-with-clean-fresh-skin_144627-25642.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Sarah P.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Color Specialist</p></div></div></div></div>
 <div key="Julia R." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-young-beautiful-woman-with-smoky-eyes-makeup-pretty-young-adult-girl-posing-studio-closeup-attractive-female-face_186202-4439.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Julia R.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Skincare Expert</p></div></div></div></div>
 <div key="Alice T." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-beautiful-young-woman-with-clean-fresh-skin_144627-25643.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Alice T.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Massage Therapist</p></div></div></div></div>
 <div key="Ben K." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/handsome-young-man-with-new-stylish-haircut_176420-19637.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Ben K.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Nail Technician</p></div></div></div></div></div></ScrollReveal></div></section></div>
     </>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1