Restaurant Footer with Reservation Form

<footer class="w-full sm:px-6 md:px-10 max-w-7xl mr-auto ml-auto pt-12 pr-4 pb-10 pl-4">
        <div class="relative overflow-hidden bg-neutral-900 rounded-3xl">
            <div class="relative z-10 sm:p-12 md:p-16 pt-12 pr-8 pb-8 pl-8">
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 border-white/10 border-b pb-12">
                    <div class="lg:col-span-4">
                        <div class="flex items-center gap-2 mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="utensils" class="lucide lucide-utensils w-5 h-5 text-white/80" style="stroke-width: 1.5"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2" class=""></path><path d="M7 2v20" class=""></path><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7" class=""></path></svg>
                            <h3 class="text-2xl font-semibold text-white tracking-tight font-playfair">Nonna's Table</h3>
                        </div>
                        <p class="max-w-3xl text-white/70">Experience the warmth of Italian hospitality and the authentic flavors of traditional recipes passed down through generations. We can't wait to welcome you to our table.</p>

                        <div id="contact" class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-5 sm:p-6 md:p-8">
                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                <div class="space-y-4">
                                    <div class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-slate-950 bg-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
                                        <span class="h-1.5 w-1.5 rounded-full bg-green-400 animate-pulse"></span>
                                        Now accepting reservations
                                    </div>
                                    <h4 class="text-white font-semibold tracking-tight">Make a reservation</h4>
                                    <ul class="space-y-2 text-sm text-neutral-300">
                                        <li class="flex items-start gap-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-green-400 mt-0.5" style="stroke-width: 1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                            <span class="">Tables for 2-12 guests available daily</span>
                                        </li>
                                        <li class="flex items-start gap-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-green-400 mt-0.5" style="stroke-width: 1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                            <span class="">Private dining rooms for special occasions</span>
                                        </li>
                                        <li class="flex items-start gap-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-green-400 mt-0.5" style="stroke-width: 1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                                            <span class="">Wine pairings and sommelier recommendations</span>
                                        </li>
                                    </ul>
                                    <div class="flex items-center gap-3 pt-2 text-sm">
                                        <a href="tel:+1234567890" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone w-4 h-4" style="stroke-width: 1.5"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
                                            +1 (234) 567‑8900
                                        </a>
                                    </div>
                                </div>

                                <form class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <div class="sm:col-span-1">
                                        <label class="block text-xs font-medium text-white/80 mb-1">Name</label>
                                        <input type="text" required="" placeholder="Your name" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-red-400/60 focus:border-red-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                                    </div>
                                    <div class="sm:col-span-1">
                                        <label class="block text-xs font-medium text-white/80 mb-1">Phone</label>
                                        <input type="tel" required="" placeholder="+1 (234) 567-8900" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-red-400/60 focus:border-red-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                                    </div>
                                    <div class="sm:col-span-1">
                                        <label class="block text-xs font-medium text-white/80 mb-1">Party size</label>
                                        <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-red-400/60 focus:border-red-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                                            <option class="bg-neutral-900" value="2">2 guests</option>
                                            <option class="bg-neutral-900" value="4">4 guests</option>
                                            <option class="bg-neutral-900" value="6">6 guests</option>
                                            <option class="bg-neutral-900" value="8">8+ guests</option>
                                        </select>
                                    </div>
                                    <div class="sm:col-span-1">
                                        <label class="block text-xs font-medium text-white/80 mb-1">Date &amp; Time</label>
                                        <input type="datetime-local" class="w-full outline-none focus:ring-2 focus:ring-red-400/60 focus:border-red-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                                    </div>
                                    <div class="sm:col-span-2">
                                        <label class="block text-xs font-medium text-white/80 mb-1">Special requests</label>
                                        <textarea rows="3" placeholder="Allergies, dietary restrictions, celebrations..." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-red-400/60 focus:border-red-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3"></textarea>
                                    </div>
                                    <div class="sm:col-span-2 flex justify-end">
                                        <button type="submit" class="inline-flex gap-2 ring-1 ring-red-300 hover:bg-red-300 transition text-sm font-medium text-neutral-900 bg-red-400 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar w-4 h-4" style="stroke-width: 1.5"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
                                            Reserve table
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row sm:items-center gap-3 border-white/10 border-t mt-10 pt-6 items-start justify-between">
                    <p class="text-white/60 text-sm">© 2024 Nonna's Table. All rights reserved.</p>
                    <div class="flex items-center gap-4 text-white/60 text-sm">
                        <span>Via Roma 123, Milano</span>
                        <span class="hidden sm:block text-white/20">•</span>
                        <span>Open daily 5:30 PM - 10:30 PM</span>
                    </div>
                </div>
            </div>

            <!-- Decorative glows -->
            
            
        </div>
    </footer>