Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UrbanTurf - Book Your Playtime</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> | |
| <style> | |
| @keyframes fade-in { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .animate-fade-in { | |
| animation: fade-in 0.8s ease forwards; | |
| } | |
| .animate-fade-in.delay-100 { animation-delay: 0.2s; } | |
| .animate-fade-in.delay-200 { animation-delay: 0.4s; } | |
| .animate-fade-in.delay-300 { animation-delay: 0.6s; } | |
| .animate-bounce { | |
| animation: bounce 2s infinite; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #00b09b, #96c93d); | |
| } | |
| .amenity-icon { | |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .amenity-icon:hover { | |
| transform: translateY(-8px) scale(1.1); | |
| } | |
| .transform-gpu { | |
| transform-style: preserve-3d; | |
| } | |
| .transform-gpu:hover { | |
| transform: perspective(1000px) rotateX(5deg) scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="grass" class="h-8 w-8 text-green-500"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800">UrbanTurf</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center space-x-8"> | |
| <a href="index.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-green-500 text-sm font-medium">Home</a> | |
| <a href="turf-details.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Turf Details</a> | |
| <a href="booking.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Book Now</a> | |
| <a href="login.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Login</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i data-feather="log-in" class="mr-2 w-4 h-4"></i> Login | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative hero-gradient text-white overflow-hidden"> | |
| <!-- Video Background --> | |
| <video autoplay muted loop class="absolute z-0 w-full h-full object-cover"> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-soccer-ball-being-kicked-into-the-goal-1239-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 bg-black/50 z-1"></div> | |
| <div class="relative z-10 max-w-7xl mx-auto py-28 px-4 sm:py-32 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-5xl font-extrabold tracking-tight sm:text-6xl lg:text-7xl animate-fade-in"> | |
| Experience <span class="text-green-400">Professional</span> Football | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-2xl animate-fade-in delay-100"> | |
| FIFA-certified turf with <span class="font-bold">premium facilities</span> for players who demand the best | |
| </p> | |
| <div class="mt-12 flex flex-col sm:flex-row justify-center gap-6 animate-fade-in delay-200"> | |
| <a href="#book" class="bg-white text-green-600 px-10 py-4 rounded-lg text-xl font-bold hover:bg-gray-100 transition-all hover:scale-105 transform-gpu"> | |
| <i data-feather="calendar" class="mr-2 inline animate-pulse"></i> Book Your Slot Now | |
| </a> | |
| <a href="turf-details.html" class="border-2 border-white text-white px-10 py-4 rounded-lg text-xl font-bold hover:bg-white hover:text-green-600 transition-all transform-gpu hover:scale-105"> | |
| <i data-feather="play" class="mr-2 inline"></i> Virtual Tour | |
| </a> | |
| </div> | |
| <div class="mt-16 animate-fade-in delay-300"> | |
| <div class="inline-flex items-center bg-white/20 backdrop-blur-sm px-6 py-3 rounded-full border border-white/30"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-6 h-6 mr-2 text-yellow-300"></i> | |
| <span class="text-lg font-medium">Rated 4.9/5 by 1500+ players</span> | |
| </div> | |
| <div class="h-6 w-px bg-white/50 mx-4"></div> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-6 h-6 mr-2 text-green-300"></i> | |
| <span class="text-lg font-medium">5000+ monthly players</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 animate-bounce"> | |
| <i data-feather="chevron-down" class="w-8 h-8 text-white"></i> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-20 bg-white"> | |
| <!-- Floating animated elements --> | |
| <div class="absolute left-10 top-1/4 opacity-10"> | |
| <div class="w-32 h-32 rounded-full bg-green-400 filter blur-3xl"></div> | |
| </div> | |
| <div class="absolute right-20 top-1/3 opacity-10"> | |
| <div class="w-40 h-40 rounded-full bg-yellow-400 filter blur-3xl"></div> | |
| </div> | |
| <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 Players Love Us | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-500"> | |
| 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 transform transition-all hover:-translate-y-2"> | |
| <div class="flow-root bg-white rounded-2xl px-8 pb-10 shadow-xl hover:shadow-2xl transition-all border border-gray-100"> | |
| <div class="-mt-8"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-gradient-to-br from-green-400 to-green-600 text-white mx-auto shadow-lg transform transition-all hover:scale-110"> | |
| <i data-feather="clock" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="mt-8 text-xl font-bold text-gray-900 text-center">Instant Booking</h3> | |
| <p class="mt-4 text-lg text-gray-600"> | |
| Reserve your slot in <span class="font-semibold">under 30 seconds</span> with our lightning-fast system. | |
| </p> | |
| <div class="mt-6 space-y-2"> | |
| <div class="flex items-center text-green-500"> | |
| <i data-feather="check-circle" class="mr-2"></i> | |
| <span>Live availability updates</span> | |
| </div> | |
| <div class="flex items-center text-green-500"> | |
| <i data-feather="check-circle" class="mr-2"></i> | |
| <span>Instant confirmation</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <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 shadow-lg"> | |
| <i data-feather="award"></i> | |
| </div> | |
| <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"> | |
| 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-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 shadow-lg"> | |
| <i data-feather="users"></i> | |
| </div> | |
| <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"> | |
| 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> | |
| <!-- Pricing Section --> | |
| <div id="pricing" class="py-20 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden"> | |
| <div class="absolute -right-20 -top-20 w-64 h-64 rounded-full bg-green-100 filter blur-3xl opacity-50"></div> | |
| <div class="absolute -left-20 -bottom-20 w-64 h-64 rounded-full bg-blue-100 filter blur-3xl opacity-50"></div> | |
| <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"> | |
| Our Pricing | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-500"> | |
| Flexible pricing for all types of players | |
| </p> | |
| </div> | |
| <div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"> | |
| <div class="relative bg-white border-2 border-gray-100 rounded-3xl shadow-xl transform transition-all hover:scale-105"> | |
| <div class="p-10"> | |
| <h3 class="text-2xl font-bold text-gray-900">Casual Play</h3> | |
| <p class="mt-3 text-lg text-gray-600"> | |
| Perfect for one-time players | |
| </p> | |
| <div class="mt-8"> | |
| <p class="flex items-baseline"> | |
| <span class="text-5xl font-bold tracking-tight text-gray-900">₹500</span> | |
| <span class="ml-2 text-xl font-semibold text-gray-500">/hour</span> | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Flexible timing</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> | |
| <span class="text-gray-600">No commitments</span> | |
| </li> | |
| </ul> | |
| <a href="#book" class="mt-8 block w-full bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-200 rounded-xl py-3 text-lg font-bold text-gray-800 text-center hover:from-gray-200 hover:to-gray-300 transition-all transform hover:scale-[1.02]"> | |
| Book Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm border-2 border-green-500"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-green-500 text-white text-xs font-semibold py-1 px-3 rounded-full">POPULAR</div> | |
| <div class="p-8"> | |
| <h3 class="text-lg font-medium text-gray-900">Regular Player</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| Best for frequent players | |
| </p> | |
| <div class="mt-6"> | |
| <p class="flex items-baseline"> | |
| <span class="text-4xl font-bold tracking-tight text-gray-900">₹400</span> | |
| <span class="ml-1 text-lg font-semibold text-gray-500">/hour</span> | |
| </p> | |
| <p class="mt-1 text-sm text-gray-500">Minimum 5 bookings/month</p> | |
| <a href="#book" class="mt-8 block w-full bg-green-500 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-green-600">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm"> | |
| <div class="p-8"> | |
| <h3 class="text-lg font-medium text-gray-900">Group Booking</h3> | |
| <p class="mt-4 text-sm text-gray-500"> | |
| Great for teams and events | |
| </p> | |
| <div class="mt-6"> | |
| <p class="flex items-baseline"> | |
| <span class="text-4xl font-bold tracking-tight text-gray-900">₹300</span> | |
| <span class="ml-1 text-lg font-semibold text-gray-500">/hour</span> | |
| </p> | |
| <p class="mt-1 text-sm text-gray-500">Minimum 10 players</p> | |
| <a href="#book" class="mt-8 block w-full bg-gray-100 border border-gray-300 rounded-md py-2 text-sm font-semibold text-gray-700 text-center hover:bg-gray-200">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Amenities Section --> | |
| <div id="amenities" class="py-20 bg-white relative"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute -right-20 -top-20 w-96 h-96 rounded-full bg-green-100 filter blur-3xl opacity-20"></div> | |
| </div> | |
| <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"> | |
| Top-Notch Amenities | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-500"> | |
| Everything you need for the perfect game | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-2 gap-8 md:grid-cols-4"> | |
| <div class="text-center transform transition-all hover:scale-110"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-2xl bg-gradient-to-br from-green-400 to-green-600 text-white mx-auto amenity-icon shadow-lg"> | |
| <i data-feather="droplet" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="mt-4 text-xl font-bold text-gray-900">Premium Hydration</h3> | |
| <p class="mt-1 text-gray-500 text-sm">RO purified & chilled</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="locker"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Changing Rooms</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="shower"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Showers</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="parking"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Parking</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="first-aid"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">First Aid</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="wifi"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Free WiFi</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="watch"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Scoreboard</h3> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon"> | |
| <i data-feather="shopping-bag"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Equipment Rental</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Booking Section --> | |
| <div id="book" class="py-20 bg-gray-50 relative"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute -left-20 -bottom-20 w-96 h-96 rounded-full bg-green-100 filter blur-3xl opacity-20"></div> | |
| </div> | |
| <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"> | |
| Easy 3-Step Booking | |
| </h2> | |
| <p class="mt-4 max-w-3xl text-lg text-gray-500"> | |
| 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 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> | |
| </div> | |
| <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> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0 relative"> | |
| <div class="bg-white py-10 px-8 shadow-2xl rounded-3xl sm:px-12 border border-gray-100 transform transition-all hover:shadow-3xl"> | |
| <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 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 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> | |
| <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> | |
| <!-- Location Section --> | |
| <div class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Our Location | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-500"> | |
| Easily accessible from all parts of the city | |
| </p> | |
| </div> | |
| <div class="mt-12"> | |
| <div class="bg-gray-50 rounded-xl overflow-hidden"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.786481768283!2d77.30758641508248!3d28.60780198242892!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce521f9e2a447%3A0x5c9a4a6d1f3a0f0!2sFootball%20Turf!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-3"> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto"> | |
| <i data-feather="map-pin"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Address</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| 123 Sports Avenue, Greenfield, City - 100001 | |
| </p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto"> | |
| <i data-feather="phone"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Phone</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| +91 98765 43210 | |
| </p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto"> | |
| <i data-feather="mail"></i> | |
| </div> | |
| <h3 class="mt-3 text-lg font-medium text-gray-900">Email</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| info@urbanturf.com | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 relative overflow-hidden"> | |
| <div class="absolute -bottom-20 -left-20 w-96 h-96 rounded-full bg-green-900 opacity-10 filter blur-3xl"></div> | |
| <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> | |
| <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">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">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">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> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 text-center"> | |
| <p class="text-gray-400"> | |
| © 2023 UrbanTurf. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Enhanced date picker | |
| flatpickr("#date", { | |
| minDate: "today", | |
| maxDate: new Date().fp_incr(60), // 60 days from now | |
| dateFormat: "D, M j Y", | |
| disableMobile: true, | |
| onChange: function() { | |
| // Simulate loading available slots | |
| document.querySelectorAll('.time-slot-btn').forEach(btn => { | |
| btn.disabled = false; | |
| btn.innerHTML = btn.textContent; | |
| if(Math.random() > 0.7) { | |
| btn.disabled = true; | |
| btn.innerHTML = '<i data-feather="x" class="w-4 h-4 mr-1"></i> Booked'; | |
| feather.replace(); | |
| } | |
| }); | |
| } | |
| }); | |
| // Enhanced time slot selection | |
| document.querySelectorAll('.time-slot-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| if(this.disabled) return; | |
| document.querySelectorAll('.time-slot-btn').forEach(b => { | |
| b.classList.remove('bg-green-500', 'text-white', 'border-green-500', 'ring-2', 'ring-green-300'); | |
| b.classList.add('border-gray-200'); | |
| }); | |
| this.classList.add('bg-green-500', 'text-white', 'border-green-500', 'ring-2', 'ring-green-300'); | |
| this.classList.remove('border-gray-200'); | |
| // Animate selection | |
| this.style.transform = 'scale(0.95)'; | |
| setTimeout(() => { | |
| this.style.transform = ''; | |
| }, 150); | |
| }); | |
| }); | |
| // Smooth scrolling with offset | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| const offset = 80; | |
| const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset; | |
| window.scrollTo({ | |
| top: targetPosition, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animate elements on scroll | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if(entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.animate-on-scroll').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| }); | |
| </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> | |