Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -16,8 +16,18 @@ import { Scissors, Star, X, Calendar, Check } from 'lucide-react';
 
 export default function LandingPage() {
   const [showBookingModal, setShowBookingModal] = useState(false);
+  const [bookingStep, setBookingStep] = useState<'form' | 'success'>('form');
+  const [formData, setFormData] = useState({ name: '', surname: '', phone: '', email: '' });
 
-  const handleBookingClick = () => setShowBookingModal(true);
+  const handleBookingClick = () => {
+    setBookingStep('form');
+    setShowBookingModal(true);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setBookingStep('success');
+  };
 
   return (
     <ThemeProvider
@@ -187,30 +197,35 @@ export default function LandingPage() {
         {showBookingModal && (
           <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-in fade-in duration-300">
             <div className="w-full max-w-md p-6 bg-white rounded-2xl shadow-2xl animate-in zoom-in-95 duration-300">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="text-xl font-bold text-gray-900">Booking Confirmed</h3>
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-xl font-bold text-gray-900">
+                  {bookingStep === 'form' ? 'Complete Booking' : 'Booking Confirmed'}
+                </h3>
                 <button onClick={() => setShowBookingModal(false)} className="p-1 text-gray-400 hover:text-gray-900 transition-colors">
                     <X className="w-5 h-5" />
                 </button>
               </div>
-              <div className="space-y-3 mb-6">
-                <p className="text-sm text-gray-500">Service: <span className="font-medium text-gray-900">Gents Cut</span></p>
-                <p className="text-sm text-gray-500">Date: <span className="font-medium text-gray-900">Tomorrow</span></p>
-                <p className="text-sm text-gray-500">Time: <span className="font-medium text-gray-900">10:00 AM</span></p>
-                <p className="mt-4 text-xs font-semibold text-emerald-600">* Payment collected on the day</p>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <button onClick={() => setShowBookingModal(false)} className="flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-white transition-all bg-black rounded-xl hover:bg-gray-800">
-                    <Check className="w-4 h-4" /> Finish
-                </button>
-                <button className="flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-gray-900 transition-all bg-gray-100 rounded-xl hover:bg-gray-200">
-                    <Calendar className="w-4 h-4" /> Calendar
-                </button>
-              </div>
+              
+              {bookingStep === 'form' ? (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <input required placeholder="Name" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, name: e.target.value})} />
+                    <input required placeholder="Surname" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, surname: e.target.value})} />
+                  </div>
+                  <input required type="tel" placeholder="Phone" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, phone: e.target.value})} />
+                  <input required type="email" placeholder="Email" className="w-full p-3 border rounded-xl" onChange={(e) => setFormData({...formData, email: e.target.value})} />
+                  <button type="submit" className="w-full p-3 text-white bg-black rounded-xl hover:bg-gray-800 transition-colors font-medium">Confirm Appointment</button>
+                </form>
+              ) : (
+                <div className="space-y-4">
+                    <p className="text-gray-600">Thank you {formData.name}, your appointment request has been submitted successfully.</p>
+                    <button onClick={() => setShowBookingModal(false)} className="w-full p-3 text-gray-900 bg-gray-100 rounded-xl hover:bg-gray-200">Close</button>
+                </div>
+              )}
             </div>
           </div>
         )}
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}