Spaces:
Running
Running
Needs vs. Wants for features Needs: Clean UI Quick tab to see bars at a glance with their special/event of the day and a button to click to put you in the detailed overview tab for more information (weekly specials, hours, address, busy time, food menu dropdown that business owners can add). Daily, weekly specials (food and drinks), hours, address, busy time, google reviews, age restrictions for the day. Calendar tab that has the monthly events that vendors can populate. Either google calendar and convert that into a custom one or just the google calendar on the app itself. Reporting system for Users and bar owners to report incorrect/old information and get in contact with us. Local Admin we can give permissions to keep the app updated when we graduate and login for them. (Or have AI be the admin). Terms of service, usage policy, privacy policy, legal disclaimer etc. Wants: A social media feed (from instagram) where bar’s posts auto fill as posted. It can then be sorted by specific bar. Radius from the user. Ability for bar owners to input their information themselves about their specific bars. Coordinate with bars and monetization & app promotion strategies. Moderators going through reports and have the ability to update bar info. Moderator login to the app. To recruit admins from other cities/towns we can have an application process with a contract and incentivize them with a % of the profit from their area. Potential customer login/account for rewards and promotions from bars? Age verification from that. Connector between event planners/bands with to bars through app Sponsored page that has 3 sponsored bars (bidded out each week/month or something) and 3 sponsored events/bands. Scaling for the future.. A one stop app that consolidates all relevant information about bars within a preset distance from Boone/App State for users to easily search through specials, events, times, etc.
771cece verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BarFinder - Discover Local Bars & Specials</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .bar-card:hover .bar-image { | |
| transform: scale(1.05); | |
| } | |
| .menu-dropdown { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .menu-dropdown.active { | |
| max-height: 500px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| .instagram-feed { | |
| scrollbar-width: none; | |
| } | |
| .instagram-feed::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-indigo-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="cocktail" class="w-6 h-6"></i> | |
| <span class="font-bold text-xl">BarFinder</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-indigo-200">Home</a> | |
| <a href="#bars" class="hover:text-indigo-200">Bars</a> | |
| <a href="#events" class="hover:text-indigo-200">Events</a> | |
| <a href="#social" class="hover:text-indigo-200">Social</a> | |
| <a href="admin.html" class="bg-indigo-700 px-3 py-1 rounded hover:bg-indigo-600">Admin</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-indigo-800 px-4 py-2" id="mobile-menu"> | |
| <a href="#" class="block py-2 hover:text-indigo-200">Home</a> | |
| <a href="#bars" class="block py-2 hover:text-indigo-200">Bars</a> | |
| <a href="#events" class="block py-2 hover:text-indigo-200">Events</a> | |
| <a href="#social" class="block py-2 hover:text-indigo-200">Social</a> | |
| <a href="admin.html" class="block py-2 text-indigo-200">Admin</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-indigo-900 to-purple-800 text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Discover the Best Bars in Boone</h1> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Find daily specials, events, and everything you need for a great night out | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> | |
| <a href="#bars" class="bg-white text-indigo-900 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition"> | |
| Explore Bars | |
| </a> | |
| <a href="#events" class="bg-indigo-700 text-white font-semibold px-6 py-3 rounded-lg hover:bg-indigo-600 transition"> | |
| View Events | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Search & Filters --> | |
| <section class="bg-white py-8 shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row gap-4 items-center"> | |
| <div class="relative flex-grow"> | |
| <input type="text" placeholder="Search bars..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i data-feather="search" class="absolute right-3 top-3.5 text-gray-400"></i> | |
| </div> | |
| <div class="flex gap-2 w-full md:w-auto"> | |
| <select class="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Distance</option> | |
| <option>1 mile</option> | |
| <option>5 miles</option> | |
| <option>10 miles</option> | |
| </select> | |
| <select class="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Age</option> | |
| <option>18+</option> | |
| <option>21+</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bars Section --> | |
| <section id="bars" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center" data-aos="fade-up">Featured Bars</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Bar Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden bar-card transition duration-300" data-aos="fade-up"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="http://static.photos/nightlife/640x360/1" alt="Bar Image" class="w-full h-full object-cover bar-image transition duration-300"> | |
| <div class="absolute top-2 right-2 bg-indigo-700 text-white px-2 py-1 rounded text-sm font-medium"> | |
| Today's Special | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold mb-2">The Local Tap</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <span class="ml-1 text-gray-700">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-3">$3 Craft Beers • 4PM-7PM</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">21+</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">Live Music</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">Outdoor Seating</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium" onclick="toggleMenu('menu1')"> | |
| View Menu <i data-feather="chevron-down" class="w-4 h-4 inline"></i> | |
| </button> | |
| <a href="bar-detail.html" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition"> | |
| Details | |
| </a> | |
| </div> | |
| <div id="menu1" class="menu-dropdown mt-3"> | |
| <h4 class="font-medium mb-2">Food Menu</h4> | |
| <ul class="space-y-1 text-sm"> | |
| <li>• Wings - $8.99</li> | |
| <li>• Nachos - $7.50</li> | |
| <li>• Burger - $10.99</li> | |
| </ul> | |
| <h4 class="font-medium mt-3 mb-2">Drink Specials</h4> | |
| <ul class="space-y-1 text-sm"> | |
| <li>• Local IPA - $3 (Happy Hour)</li> | |
| <li>• Margarita - $5 (All Night)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bar Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden bar-card transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="http://static.photos/nightlife/640x360/2" alt="Bar Image" class="w-full h-full object-cover bar-image transition duration-300"> | |
| <div class="absolute top-2 right-2 bg-purple-700 text-white px-2 py-1 rounded text-sm font-medium"> | |
| Event Tonight | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold mb-2">Boone Brews</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <span class="ml-1 text-gray-700">4.5</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-3">Trivia Night • 8PM</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">18+</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">Craft Beer</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">Food Available</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium" onclick="toggleMenu('menu2')"> | |
| View Menu <i data-feather="chevron-down" class="w-4 h-4 inline"></i> | |
| </button> | |
| <a href="bar-detail.html" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition"> | |
| Details | |
| </a> | |
| </div> | |
| <div id="menu2" class="menu-dropdown mt-3"> | |
| <h4 class="font-medium mb-2">Food Menu</h4> | |
| <ul class="space-y-1 text-sm"> | |
| <li>• Pizza - $12.99</li> | |
| <li>• Salad - $6.50</li> | |
| <li>• Fries - $4.99</li> | |
| </ul> | |
| <h4 class="font-medium mt-3 mb-2">Drink Specials</h4> | |
| <ul class="space-y-1 text-sm"> | |
| <li>• House Brew - $4 (All Night)</li> | |
| <li>• Wine - $5/glass</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bar Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden bar-card transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="http://static.photos/nightlife/640x360/3" alt="Bar Image" class="w-full h-full object-cover bar-image transition duration-300"> | |
| <div class="absolute top-2 right-2 bg-green-700 text-white px-2 py-1 rounded text-sm font-medium"> | |
| Weekly Special | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold mb-2">Mountain View Lounge</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <span class="ml-1 text-gray-700">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-3">$5 Cocktails • All Week</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">21+</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">Cocktails</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs">VIP Area</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium" onclick="toggleMenu('menu3')"> | |
| View Menu <i data-feather="chevron-down" class="w-4 h-4 inline"></i> | |
| </button> | |
| <a href="bar-detail.html" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition"> | |
| Details | |
| </a> | |
| </div> | |
| <div id="menu3" class="menu-dropdown mt-3"> | |
| <h4 class="font-medium mb-2">Food Menu</h4> | |
| <ul class="space-y-1 text-sm"> | |
| <li>• Sliders - $9.99</li> | |
| <li>• Tacos - $8.50</li> | |
| <li>• Cheese Plate - $11.99</li> | |
| </ul> | |
| <h4 class="font-medium mt-3 mb-2">Drink Specials</h4> | |
| <ul class="space-y-1 text-sm"> | |
| <li>• Signature Cocktails - $5 (All Week)</li> | |
| <li>• Domestic Beer - $3</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="bars.html" class="inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition"> | |
| View All Bars | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section id="events" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">Upcoming Events</h2> | |
| <a href="events.html" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| View Calendar <i data-feather="calendar" class="w-4 h-4 inline"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Event Card 1 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> | |
| <div class="relative h-48"> | |
| <img src="http://static.photos/event/640x360/1" alt="Event Image" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold text-lg">Live Band Night</div> | |
| <div class="text-gray-200 text-sm">Tomorrow • 9PM</div> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center text-sm text-gray-600 mb-3"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1"></i> | |
| <span>The Local Tap</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">Join us for an evening with local favorite "Mountain Sound" playing all your favorite hits!</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">21+</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| More Info | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 2 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="relative h-48"> | |
| <img src="http://static.photos/event/640x360/2" alt="Event Image" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold text-lg">Karaoke Thursday</div> | |
| <div class="text-gray-200 text-sm">Thu • 8PM</div> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center text-sm text-gray-600 mb-3"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1"></i> | |
| <span>Boone Brews</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">Show off your singing skills or just enjoy the show! Drink specials all night for participants.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">18+</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| More Info | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 3 --> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="relative h-48"> | |
| <img src="http://static.photos/event/640x360/3" alt="Event Image" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="text-white font-bold text-lg">Sunday Funday</div> | |
| <div class="text-gray-200 text-sm">Sun • 12PM-6PM</div> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center text-sm text-gray-600 mb-3"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-1"></i> | |
| <span>Mountain View Lounge</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">Bottomless mimosas, live DJ, and outdoor games. The perfect way to spend your Sunday!</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">21+</span> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| More Info | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Social Feed Section --> | |
| <section id="social" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">From Our Bars</h2> | |
| <div class="relative"> | |
| <div class="instagram-feed flex overflow-x-auto space-x-4 pb-6 scroll-smooth" style="scroll-snap-type: x mandatory;"> | |
| <!-- Instagram Post 1 --> | |
| <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden" style="scroll-snap-align: start;"> | |
| <img src="http://static.photos/nightlife/320x240/1" alt="Instagram Post" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/logo/200x200/1" alt="Bar Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="font-medium">@thelocaltap</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Happy Hour just got happier! $3 craft beers until 7PM 🍻 #boonenightlife</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> | |
| <span class="mr-3">142</span> | |
| <i data-feather="message-circle" class="w-4 h-4 mr-1"></i> | |
| <span>23</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Instagram Post 2 --> | |
| <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden" style="scroll-snap-align: start;"> | |
| <img src="http://static.photos/nightlife/320x240/2" alt="Instagram Post" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/logo/200x200/2" alt="Bar Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="font-medium">@boonebrews</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Trivia night champions! Who's ready for next week? 🏆 #boonebrews #trivianight</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> | |
| <span class="mr-3">98</span> | |
| <i data-feather="message-circle" class="w-4 h-4 mr-1"></i> | |
| <span>15</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Instagram Post 3 --> | |
| <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden" style="scroll-snap-align: start;"> | |
| <img src="http://static.photos/nightlife/320x240/3" alt="Instagram Post" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/logo/200x200/3" alt="Bar Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="font-medium">@mountainviewlounge</span> | |
| </div> | |
| <p class="text-sm text-gray-600">New cocktail menu dropping this weekend! Who's coming? 🍹 #cocktails #boone</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> | |
| <span class="mr-3">215</span> | |
| <i data-feather="message-circle" class="w-4 h-4 mr-1"></i> | |
| <span>42</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Instagram Post 4 --> | |
| <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden" style="scroll-snap-align: start;"> | |
| <img src="http://static.photos/nightlife/320x240/4" alt="Instagram Post" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/logo/200x200/4" alt="Bar Logo" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="font-medium">@appalachianpub</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Sunday Funday starts now! Bottomless mimosas until 6PM 🥂 #sundayfunday</p> | |
| <div class="flex items-center mt-3 text-sm text-gray-500"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> | |
| <span class="mr-3">176</span> | |
| <i data-feather="message-circle" class="w-4 h-4 mr-1"></i> | |
| <span>31</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="absolute left-0 top-1/2 -translate-y-1/2 -ml-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 hidden md:block"> | |
| <i data-feather="chevron-left" class="w-5 h-5 text-gray-700"></i> | |
| </button> | |
| <button class="absolute right-0 top-1/2 -translate-y-1/2 -mr-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 hidden md:block"> | |
| <i data-feather="chevron-right" class="w-5 h-5 text-gray-700"></i> | |
| </button> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="inline-flex items-center bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition"> | |
| <i data-feather="instagram" class="w-5 h-5 mr-2"></i> | |
| Follow All Bars | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sponsored Section --> | |
| <section class="py-12 bg-indigo-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Sponsored</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Sponsored Bar 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> | |
| <div class="relative h-48"> | |
| <img src="http://static.photos/nightlife/640x360/4" alt="Sponsored Bar" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded text-sm font-medium"> | |
| Sponsored | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-bold mb-2">Appalachian Pub</h3> | |
| <p class="text-gray-600 mb-4">$2 Tacos & $4 Margaritas every Tuesday!</p> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| Learn More <i data-feather="arrow-right" class="w-4 h-4 inline"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Sponsored Event --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="relative h-48"> | |
| <img src="http://static.photos/event/640x360/5" alt="Sponsored Event" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded text-sm font-medium"> | |
| Sponsored | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-bold mb-2">Beer Festival</h3> | |
| <p class="text-gray-600 mb-4">June 15th • 50+ breweries • Live music</p> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| Get Tickets <i data-feather="arrow-right" class="w-4 h-4 inline"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Sponsored Band --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="relative h-48"> | |
| <img src="http://static.photos/music/640x360/1" alt="Sponsored Band" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 left-2 bg-yellow-500 text-white px-2 py-1 rounded text-sm font-medium"> | |
| Sponsored | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-bold mb-2">The Highlanders</h3> | |
| <p class="text-gray-600 mb-4">Live at Boone Brews • June 10th</p> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium"> | |
| Event Details <i data-feather="arrow-right" class="w-4 h-4 inline"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Report Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm"> | |
| <h2 class="text-2xl font-bold mb-4">See Incorrect Information?</h2> | |
| <p class="text-gray-600 mb-6">Help us keep BarFinder accurate by reporting outdated or incorrect details about bars and events.</p> | |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition"> | |
| Report an Issue | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="cocktail" class="w-6 h-6"></i> | |
| <span class="font-bold text-xl">BarFinder</span> | |
| </div> | |
| <p class="text-gray-400">Discover the best bars and events in Boone, NC.</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#bars" class="text-gray-400 hover:text-white">Bars</a></li> | |
| <li><a href="#events" class="text-gray-400 hover:text-white">Events</a></li> | |
| <li><a href="#social" class="text-gray-400 hover:text-white">Social</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Disclaimer</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400">For bar owners: <a href="admin.html" class="text-indigo-400 hover:text-indigo-300">Claim your listing</a></p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 BarFinder. All rights reserved.</p> | |
| <p class="mt-1">Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> in Boone, NC</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Menu dropdown toggle | |
| function toggleMenu(id) { | |
| const menu = document.getElementById(id); | |
| menu.classList.toggle('active'); | |
| const icon = menu.previousElementSpreviousElementSibling.querySelector('i'); | |
| if (menu.classList.contains('active')) { | |
| icon.setAttribute('data-feather', 'chevron-up'); | |
| } else { | |
| icon.setAttribute('data-feather', 'chevron-down'); | |
| } | |
| feather.replace(); | |
| } | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |