make user friendly interface

index.html

@@ -51,76 +51,101 @@
             </div>
         </div>
     </nav>
-
     <!-- Hero Section -->
     <div class="hero-gradient text-white">
         <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
             <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
-                Book Your Perfect Playtime
+                Play Football Like A Pro
             </h1>
             <p class="mt-6 max-w-lg mx-auto text-xl">
-                Premium football turf with state-of-the-art facilities. Book your slot in seconds!
+                World-class artificial turf with premium facilities. Book in 3 simple steps!
             </p>
-            <div class="mt-10">
-                <a href="#book" class="bg-white text-green-600 px-8 py-3 rounded-md text-lg font-bold hover:bg-gray-100">
-                    Book Now <i data-feather="arrow-right" class="ml-2 inline"></i>
+            <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#book" class="bg-white text-green-600 px-8 py-3 rounded-md text-lg font-bold hover:bg-gray-100 transition-all hover:scale-105">
+                    <i data-feather="calendar" class="mr-2 inline"></i> Book Now
+                </a>
+                <a href="turf-details.html" class="border-2 border-white text-white px-8 py-3 rounded-md text-lg font-bold hover:bg-white hover:text-green-600 transition-all">
+                    <i data-feather="info" class="mr-2 inline"></i> Learn More
                 </a>
             </div>
+            <div class="mt-12">
+                <div class="inline-flex items-center bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
+                    <i data-feather="star" class="w-5 h-5 mr-2 text-yellow-300"></i>
+                    <span class="font-medium">Rated 4.9/5 by 500+ players</span>
+                </div>
+            </div>
         </div>
     </div>
-
     <!-- Features Section -->
     <div id="features" class="py-16 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center">
                 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
-                    Why Choose UrbanTurf?
+                    Why Players Love Us
                 </h2>
                 <p class="mt-4 max-w-2xl mx-auto text-gray-500">
-                    We provide the best football experience in town
+                    Experience football like never before with our premium facilities
                 </p>
             </div>
             <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
                 <div class="pt-6">
-                    <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
+                    <div class="flow-root bg-white rounded-lg px-6 pb-8 shadow-md hover:shadow-lg transition-shadow">
                         <div class="-mt-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
+                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto shadow-lg">
                                 <i data-feather="clock"></i>
                             </div>
-                            <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">24/7 Availability</h3>
+                            <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Instant Booking</h3>
                             <p class="mt-5 text-base text-gray-500">
-                                Book anytime with our easy online system. Lights available for night games.
+                                Reserve your slot in seconds with our lightning-fast booking system.
                             </p>
+                            <div class="mt-6">
+                                <div class="flex items-center text-green-500 text-sm">
+                                    <i data-feather="check-circle" class="mr-2"></i>
+                                    <span>Real-time availability</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="pt-6">
-                    <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
+                    <div class="flow-root bg-white rounded-lg px-6 pb-8 shadow-md hover:shadow-lg transition-shadow">
                         <div class="-mt-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
-                                <i data-feather="dollar-sign"></i>
+                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto shadow-lg">
+                                <i data-feather="award"></i>
                             </div>
-                            <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Affordable Rates</h3>
+                            <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Premium Quality</h3>
                             <p class="mt-5 text-base text-gray-500">
-                                Competitive pricing with discounts for regular players and group bookings.
+                                FIFA-certified artificial turf with professional-grade maintenance.
                             </p>
+                            <div class="mt-6">
+                                <div class="flex items-center text-green-500 text-sm">
+                                    <i data-feather="check-circle" class="mr-2"></i>
+                                    <span>Perfect for all skill levels</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="pt-6">
-                    <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
+                    <div class="flow-root bg-white rounded-lg px-6 pb-8 shadow-md hover:shadow-lg transition-shadow">
                         <div class="-mt-6">
-                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
-                                <i data-feather="shield"></i>
+                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto shadow-lg">
+                                <i data-feather="users"></i>
                             </div>
-                            <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Secure Payments</h3>
+                            <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Player Community</h3>
                             <p class="mt-5 text-base text-gray-500">
-                                Safe online transactions with instant confirmation via email & SMS.
+                                Join our league and connect with fellow football enthusiasts.
                             </p>
+                            <div class="mt-6">
+                                <div class="flex items-center text-green-500 text-sm">
+                                    <i data-feather="check-circle" class="mr-2"></i>
+                                    <span>5000+ active players</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+</div>
         </div>
     </div>
 
@@ -251,77 +276,103 @@
             </div>
         </div>
     </div>
-
     <!-- Booking Section -->
     <div id="book" class="py-16 bg-gray-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="lg:grid lg:grid-cols-2 lg:gap-8">
                 <div>
                     <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
-                        Book Your Slot
+                        Easy 3-Step Booking
                     </h2>
                     <p class="mt-4 max-w-3xl text-lg text-gray-500">
-                        Check availability and reserve your playtime instantly. Our turf is available from 6 AM to 11 PM daily.
+                        Reserve your perfect playtime in less than a minute. Our turf is available from 6 AM to 11 PM daily.
                     </p>
-                    <div class="mt-8">
-                        <div class="flex items-center">
-                            <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
-                                <i data-feather="check" class="h-4 w-4 text-white"></i>
+                    <div class="mt-8 space-y-6">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 bg-green-500 rounded-full p-2 text-white">
+                                <span class="font-bold">1</span>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-gray-900">Pick Date & Time</h3>
+                                <p class="mt-1 text-base text-gray-500">Choose from available slots that fit your schedule</p>
                             </div>
-                            <p class="ml-3 text-base text-gray-500">Real-time availability updates</p>
                         </div>
-                        <div class="mt-4 flex items-center">
-                            <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
-                                <i data-feather="check" class="h-4 w-4 text-white"></i>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 bg-green-500 rounded-full p-2 text-white">
+                                <span class="font-bold">2</span>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-gray-900">Enter Details</h3>
+                                <p class="mt-1 text-base text-gray-500">We only need basic info to confirm your booking</p>
                             </div>
-                            <p class="ml-3 text-base text-gray-500">Instant booking confirmation</p>
                         </div>
-                        <div class="mt-4 flex items-center">
-                            <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
-                                <i data-feather="check" class="h-4 w-4 text-white"></i>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 bg-green-500 rounded-full p-2 text-white">
+                                <span class="font-bold">3</span>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-gray-900">Secure Payment</h3>
+                                <p class="mt-1 text-base text-gray-500">Pay online or at venue - your choice!</p>
                             </div>
-                            <p class="ml-3 text-base text-gray-500">Secure payment options</p>
                         </div>
                     </div>
                 </div>
                 <div class="mt-12 lg:mt-0">
-                    <div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10">
+                    <div class="bg-white py-8 px-6 shadow-lg rounded-xl sm:px-10">
+                        <div class="text-center mb-6">
+                            <h3 class="text-xl font-bold text-gray-900">Check Availability</h3>
+                            <p class="text-gray-500 mt-1">Select your preferred time to see real-time availability</p>
+                        </div>
                         <form class="mb-0 space-y-6">
                             <div>
-                                <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
-                                <div class="mt-1">
-                                    <input type="text" id="date" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="Select date">
+                                <label for="date" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
+                                    <i data-feather="calendar" class="w-4 h-4 mr-2 text-green-500"></i> Date
+                                </label>
+                                <div class="mt-1 relative">
+                                    <input type="text" id="date" class="w-full border border-gray-300 rounded-lg shadow-sm py-3 px-4 focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Select your date">
+                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                                        <i data-feather="chevron-down" class="h-5 w-5 text-gray-400"></i>
+                                    </div>
                                 </div>
                             </div>
                             <div>
-                                <label for="time" class="block text-sm font-medium text-gray-700">Time Slot</label>
-                                <div class="mt-1">
-                                    <select id="time" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500">
-                                        <option>Morning (6 AM - 12 PM)</option>
-                                        <option>Afternoon (12 PM - 5 PM)</option>
-                                        <option>Evening (5 PM - 11 PM)</option>
-                                    </select>
+                                <label for="time" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
+                                    <i data-feather="clock" class="w-4 h-4 mr-2 text-green-500"></i> Time Slot
+                                </label>
+                                <div class="grid grid-cols-3 gap-3">
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        6-8AM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        8-10AM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        10-12PM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        12-2PM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        2-4PM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        4-6PM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        6-8PM
+                                    </button>
+                                    <button type="button" class="time-slot-btn py-2 border border-gray-200 rounded-lg text-sm font-medium hover:bg-green-50 hover:border-green-300 transition-all">
+                                        8-10PM
+                                    </button>
                                 </div>
                             </div>
                             <div>
-                                <label for="hours" class="block text-sm font-medium text-gray-700">Duration (hours)</label>
-                                <div class="mt-1">
-                                    <select id="hours" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500">
-                                        <option>1 hour</option>
-                                        <option>2 hours</option>
-                                        <option>3 hours</option>
-                                        <option>4 hours</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div>
-                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
-                                    Check Availability
+                                <button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-bold text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all hover:scale-[1.02]">
+                                    <i data-feather="search" class="w-5 h-5 mr-2"></i> Check Availability
                                 </button>
                             </div>
                         </form>
-                    </div>
-                </div>
+</div>
             </div>
         </div>
     </div>
@@ -375,86 +426,105 @@
             </div>
         </div>
     </div>
-
     <!-- Footer -->
     <footer class="bg-gray-800">
         <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
             <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
-                    <ul class="mt-4 space-y-4">
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
-                    </ul>
+                    <div class="flex items-center">
+                        <i data-feather="grass" class="h-6 w-6 text-green-500"></i>
+                        <span class="ml-2 text-xl font-bold text-white">UrbanTurf</span>
+                    </div>
+                    <p class="mt-4 text-gray-300">
+                        Premium football turf for players who demand the best.
+                    </p>
+                    <div class="mt-4 flex space-x-4">
+                        <a href="#" class="text-gray-300 hover:text-green-400 transition-colors">
+                            <i data-feather="facebook" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="text-gray-300 hover:text-green-400 transition-colors">
+                            <i data-feather="instagram" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="text-gray-300 hover:text-green-400 transition-colors">
+                            <i data-feather="twitter" class="w-5 h-5"></i>
+                        </a>
+                    </div>
                 </div>
                 <div>
-                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
-                    <ul class="mt-4 space-y-4">
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Cancellation</a></li>
+                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Quick Links</h3>
+                    <ul class="mt-4 space-y-3">
+                        <li><a href="index.html" class="text-base text-gray-300 hover:text-green-400 transition-colors">Home</a></li>
+                        <li><a href="turf-details.html" class="text-base text-gray-300 hover:text-green-400 transition-colors">Turf Details</a></li>
+                        <li><a href="booking.html" class="text-base text-gray-300 hover:text-green-400 transition-colors">Book Now</a></li>
+                        <li><a href="login.html" class="text-base text-gray-300 hover:text-green-400 transition-colors">Login</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
-                    <ul class="mt-4 space-y-4">
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
+                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
+                    <ul class="mt-4 space-y-3">
+                        <li><a href="#" class="text-base text-gray-300 hover:text-green-400 transition-colors">FAQ</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-green-400 transition-colors">Contact Us</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-green-400 transition-colors">Cancellation Policy</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
-                    <div class="mt-4 flex space-x-6">
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i data-feather="facebook"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i data-feather="instagram"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i data-feather="twitter"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
-                            <i data-feather="youtube"></i>
-                        </a>
-                    </div>
-                    <div class="mt-6">
-                        <p class="text-gray-300 text-sm">Subscribe to our newsletter</p>
-                        <div class="mt-2 flex">
-                            <input type="email" placeholder="Your email" class="rounded-l-md px-3 py-2 border border-gray-600 bg-gray-700 text-white focus:outline-none focus:ring-green-500 focus:border-green-500 w-full">
-                            <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-r-md text-sm font-medium">
-                                Subscribe
+                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Newsletter</h3>
+                    <p class="mt-4 text-gray-300">
+                        Get updates on special offers and football events
+                    </p>
+                    <div class="mt-4">
+                        <form class="flex">
+                            <input type="email" placeholder="Your email" class="flex-1 rounded-l-lg px-4 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-green-500">
+                            <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-r-lg font-medium transition-colors">
+                                Join
                             </button>
-                        </div>
+                        </form>
                     </div>
                 </div>
             </div>
-            <div class="mt-12 border-t border-gray-700 pt-8 flex justify-between items-center">
-                <p class="text-gray-400 text-sm">
-                    &copy; 2023 UrbanTurf. All rights reserved.
+            <div class="mt-12 border-t border-gray-700 pt-8 text-center">
+                <p class="text-gray-400">
+                    &copy; 2023 UrbanTurf. All rights reserved. 
                 </p>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-gray-300">
-                        <span class="sr-only">English</span>
-                        <span class="text-sm">EN</span>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-gray-300">
-                        <span class="sr-only">Hindi</span>
-                        <span class="text-sm">हिंदी</span>
-                    </a>
-                </div>
             </div>
-        </div>
+</div>
     </footer>
-
     <script>
         feather.replace();
         flatpickr("#date", {
             minDate: "today",
-            maxDate: new Date().fp_incr(30) // 30 days from now
+            maxDate: new Date().fp_incr(30), // 30 days from now
+            dateFormat: "D, M j", // More readable format
+            disableMobile: true // Better mobile experience
+        });
+
+        // Time slot selection
+        document.querySelectorAll('.time-slot-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                document.querySelectorAll('.time-slot-btn').forEach(b => {
+                    b.classList.remove('bg-green-500', 'text-white', 'border-green-500');
+                    b.classList.add('border-gray-200');
+                });
+                this.classList.add('bg-green-500', 'text-white', 'border-green-500');
+                this.classList.remove('border-gray-200');
+            });
+        });
+
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
         });
     </script>
+    <!-- Floating Action Button -->
+    <div class="fixed bottom-6 right-6">
+        <a href="booking.html" class="w-14 h-14 bg-green-500 rounded-full shadow-lg flex items-center justify-center text-white hover:bg-green-600 transition-colors hover:scale-110">
+            <i data-feather="calendar" class="w-6 h-6"></i>
+        </a>
+    </div>
 </body>
 </html>