src/app/page.tsx

@@ -10,7 +10,7 @@ import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCar
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import { Star, Sparkles, Award, Heart, Mail, Calendar, X, Clock, Users, CheckCircle } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import React from "react";
 
 interface TimeSlot {
@@ -50,6 +50,47 @@ const TIME_SLOTS: TimeSlot[] = [
   { time: '04:00 PM', available: true },
 ];
 
+function FloatingDotsAnimation() {
+  return (
+    <div className="fixed inset-0 pointer-events-none overflow-hidden">
+      {Array.from({ length: 30 }).map((_, i) => {
+        const randomDelay = Math.random() * 2;
+        const randomDuration = 3 + Math.random() * 2;
+        const randomX = Math.random() * 100;
+        const randomY = Math.random() * 100;
+        const randomSize = 2 + Math.random() * 4;
+        
+        return (
+          <div
+            key={i}
+            className="absolute rounded-full bg-magenta-500 opacity-60"
+            style={{
+              width: `${randomSize}px`,
+              height: `${randomSize}px`,
+              left: `${randomX}%`,
+              top: `${randomY}%`,
+              animation: `float-dots ${randomDuration}s ease-in-out ${randomDelay}s infinite`,
+              backgroundColor: '#ff00ff',
+            }}
+          />
+        );
+      })}
+      <style>{`
+        @keyframes float-dots {
+          0%, 100% {
+            transform: translate(0, 0) scale(1);
+            opacity: 0.3;
+          }
+          50% {
+            transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) scale(1.2);
+            opacity: 0.8;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
+
 function BookingModal({ isOpen, onClose, onSubmit }: { isOpen: boolean; onClose: () => void; onSubmit: (data: any) => void }) {
   const [state, setState] = React.useState<BookingState>({
     isOpen,
@@ -358,7 +399,6 @@ export default function LandingPage() {
 
   const handleBookingSubmit = (data: any) => {
     console.log('Booking submitted:', data);
-    // Here you would typically send this to your backend
     alert(`Booking confirmed for ${data.name} on ${data.date} at ${data.time}`);
   };
 
@@ -375,6 +415,7 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="light"
     >
+      <FloatingDotsAnimation />
       <BookingModal
         isOpen={bookingOpen}
         onClose={() => setBookingOpen(false)}