On the home page I recquire activities in a carasol and instead of events add popular activities. Add a popup asking if they want to search location international and domestic. I selected domestic redirect to 404 page not found and if selected domestic redirect to page showing all the locations where that activity is performed and when location selected show all the vendors who sell the tickets of that activity.And set domestic location as India - Initial Deployment
d0f6272 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VivaTix - Discover & Book Exciting Activities</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#fff7ed', | |
| 100: '#ffedd5', | |
| 200: '#fed7aa', | |
| 300: '#fdba74', | |
| 400: '#fb923c', | |
| 500: '#f97316', | |
| 600: '#ea580c', | |
| 700: '#c2410c', | |
| 800: '#9a3412', | |
| 900: '#7c2d12', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(249,115,22,0.9) 0%, rgba(234,88,12,0.9) 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .ticket-card { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ticket-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 8px; | |
| background: linear-gradient(90deg, #fb923c 0%, #f97316 50%, #ea580c 100%); | |
| } | |
| .search-box { | |
| box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3), 0 4px 6px -2px rgba(249, 115, 22, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <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 class="fas fa-ticket-alt text-primary-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-primary-600">VivaTix</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Events</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Activities</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">My Tickets</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> | |
| Sign In | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </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"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl sm:leading-tight lg:text-6xl"> | |
| Discover Amazing Experiences | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl"> | |
| Book tickets for concerts, sports, theater, and unique local activities all in one place. | |
| </p> | |
| <div class="mt-10 max-w-md mx-auto sm:max-w-none sm:flex sm:justify-center"> | |
| <div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"> | |
| <a href="#" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-primary-700 bg-white hover:bg-gray-50 sm:px-8"> | |
| Explore Events | |
| </a> | |
| <a href="#" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"> | |
| How It Works | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10"> | |
| <div class="bg-white rounded-lg shadow-xl p-6 search-box"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-map-marker-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" id="location" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500" placeholder="Where to?"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-calendar-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" id="date" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500" placeholder="Select dates"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select id="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"> | |
| <option>All Categories</option> | |
| <option>Concerts</option> | |
| <option>Sports</option> | |
| <option>Theater</option> | |
| <option>Workshops</option> | |
| <option>Tours</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button type="button" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Search Activities | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Events Section --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Popular Events</h2> | |
| <a href="#" class="text-primary-500 hover:text-primary-700 font-medium">View all</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Event Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ticket-card"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Concert event"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md"> | |
| <i class="fas fa-heart text-primary-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-primary-500 bg-primary-50 px-2 py-1 rounded">Music</span> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-1">Summer Music Festival</h3> | |
| <p class="text-sm text-gray-500 mb-3">Experience the biggest music festival of the year with top artists.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Jun 15, 2023</span> | |
| </div> | |
| <div class="text-primary-500 font-bold">$59+</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ticket-card"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Theater event"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-primary-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-primary-500 bg-primary-50 px-2 py-1 rounded">Theater</span> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-1">Broadway Musical</h3> | |
| <p class="text-sm text-gray-500 mb-3">Award-winning musical performance with stunning visuals.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Jun 20-25, 2023</span> | |
| </div> | |
| <div class="text-primary-500 font-bold">$89+</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ticket-card"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Sports event"> | |
| <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-primary-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-primary-500 bg-primary-50 px-2 py-1 rounded">Sports</span> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-1">Championship Finals</h3> | |
| <p class="text-sm text-gray-500 mb-3">Witness the most anticipated sports event of the season.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Jul 5, 2023</span> | |
| </div> | |
| <div class="text-primary-500 font-bold">$75+</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">Browse by Category</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition duration-300 cursor-pointer"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 text-primary-500 mb-3"> | |
| <i class="fas fa-music text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-900">Concerts</h3> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition duration-300 cursor-pointer"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 text-primary-500 mb-3"> | |
| <i class="fas fa-running text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-900">Sports</h3> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition duration-300 cursor-pointer"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 text-primary-500 mb-3"> | |
| <i class="fas fa-theater-masks text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-900">Theater</h3> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition duration-300 cursor-pointer"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 text-primary-500 mb-3"> | |
| <i class="fas fa-utensils text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-900">Food & Drink</h3> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition duration-300 cursor-pointer"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 text-primary-500 mb-3"> | |
| <i class="fas fa-landmark text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-medium text-gray-900">Tours</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Activities --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Featured Activities</h2> | |
| <a href="#" class="text-primary-500 hover:text-primary-700 font-medium">View all</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Featured Activity 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0 md:w-1/3"> | |
| <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Cooking class"> | |
| </div> | |
| <div class="p-6 md:w-2/3"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-primary-500 bg-primary-50 px-2 py-1 rounded">Workshop</span> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Italian Cooking Masterclass</h3> | |
| <p class="text-gray-500 text-sm mb-4">Learn authentic Italian cooking techniques from a master chef in this hands-on workshop.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>3 hours</span> | |
| </div> | |
| <div class="text-primary-500 font-bold">$45</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Activity 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0 md:w-1/3"> | |
| <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1533174075246-9d0f7a1a9cb1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="City tour"> | |
| </div> | |
| <div class="p-6 md:w-2/3"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-primary-500 bg-primary-50 px-2 py-1 rounded">Tour</span> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Historic City Walking Tour</h3> | |
| <p class="text-gray-500 text-sm mb-4">Discover hidden gems and fascinating stories on this guided walking tour through the city's historic district.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>2.5 hours</span> | |
| </div> | |
| <div class="text-primary-500 font-bold">$35</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-primary-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-center text-2xl font-bold text-gray-900 mb-12">What Our Customers Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-gray-900">Sarah J.</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm">"Found amazing last-minute tickets to a sold-out concert! The booking process was super easy and I received my tickets instantly."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T."> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-gray-900">Michael T.</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm">"The food tour we booked was incredible! We discovered restaurants we would have never found on our own. Highly recommend!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R."> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-gray-900">Emily R.</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm">"I use VivaTix for all my event bookings. The app makes it so easy to discover unique activities in my city."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-primary-600"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-3xl"> | |
| <span class="block">Ready to explore?</span> | |
| <span class="block text-primary-200">Download our app now.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary-600 bg-white hover:bg-primary-50"> | |
| <i class="fab fa-apple mr-2"></i> App Store | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-500 bg-opacity-60 hover:bg-opacity-70"> | |
| <i class="fab fa-google-play mr-2"></i> Google Play | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 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-500 hover:text-primary-500">About</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Press</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Blog</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-4"> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Help Center</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Safety</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Cancellation</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Contact</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-500 hover:text-primary-500">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-500 hover:text-primary-500">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Follow Us</h3> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-primary-500"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary-500"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary-500"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary-500"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Subscribe to our newsletter</h3> | |
| <div class="mt-4 flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 w-full"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-r-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-200 pt-8"> | |
| <p class="text-base text-gray-400 text-center"> | |
| © 2023 VivaTix. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple JavaScript for demo purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Favorite button toggle | |
| const favoriteButtons = document.querySelectorAll('.fa-heart'); | |
| favoriteButtons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| if (this.classList.contains('far')) { | |
| this.classList.remove('far'); | |
| this.classList.remove('text-gray-400'); | |
| this.classList.add('fas'); | |
| this.classList.add('text-primary-500'); | |
| } else { | |
| this.classList.remove('fas'); | |
| this.classList.remove('text-primary-500'); | |
| this.classList.add('far'); | |
| this.classList.add('text-gray-400'); | |
| } | |
| }); | |
| }); | |
| // Card click handler | |
| const cards = document.querySelectorAll('.card-hover'); | |
| cards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would navigate to the event/activity detail page | |
| console.log('Navigating to event detail page'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=moxnaik/vivatix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |