| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Monday Vibes - Lagos Edition</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"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .monday-gradient { |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); |
| } |
| |
| .activity-card: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); |
| } |
| |
| .traffic-icon { |
| animation: move 3s infinite ease-in-out; |
| } |
| |
| @keyframes move { |
| 0%, 100% { transform: translateX(0); } |
| 50% { transform: translateX(10px); } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full monday-gradient flex items-center justify-center text-white font-bold text-xl"> |
| M |
| </div> |
| <span class="ml-3 text-xl font-semibold text-gray-800">Monday Vibes</span> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="text-indigo-600 font-medium">Home</a> |
| <a href="#activities" class="text-gray-600 hover:text-indigo-600 transition">Activities</a> |
| <a href="#tips" class="text-gray-600 hover:text-indigo-600 transition">Tips</a> |
| <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a> |
| </nav> |
| <button class="md:hidden text-gray-600 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="monday-gradient text-white py-20"> |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Conquer Your Monday in Lagos!</h1> |
| <p class="text-xl mb-8">Start your week right with our guide to navigating Lagos every Monday. Beat the traffic, find the best spots, and make your Monday productive.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300 pulse"> |
| Get Monday Tips |
| </button> |
| <button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition duration-300"> |
| Watch Video <i class="fas fa-play ml-2"></i> |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Lagos skyline" |
| class="rounded-xl shadow-2xl max-w-full h-auto"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="activities" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Typical Monday Activities in Lagos</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">From the early morning hustle to the evening wind-down, here's how Lagosians spend their Mondays.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 rounded-xl p-6 activity-card transition duration-300 shadow-md hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4"> |
| <i class="fas fa-car text-xl traffic-icon"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Morning Traffic Rush</h3> |
| </div> |
| <p class="text-gray-600 mb-4">The infamous Lagos Monday morning traffic starts as early as 5:30 AM. Main routes like Third Mainland Bridge, Ikorodu Road, and Lagos-Ibadan Expressway experience heavy congestion.</p> |
| <div class="flex items-center text-sm text-indigo-600"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>5:30 AM - 10:00 AM</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 activity-card transition duration-300 shadow-md hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4"> |
| <i class="fas fa-coffee text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Office Coffee Sessions</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Workplaces buzz with weekend stories over coffee. Popular spots like Cafe Neo and Art Cafe are packed with professionals grabbing their Monday morning caffeine fix.</p> |
| <div class="flex items-center text-sm text-purple-600"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>8:00 AM - 10:00 AM</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 activity-card transition duration-300 shadow-md hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4"> |
| <i class="fas fa-briefcase text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Weekly Planning Meetings</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Most offices hold their weekly planning meetings on Monday mornings. Conference rooms across Victoria Island and Ikoyi are booked solid for strategy sessions.</p> |
| <div class="flex items-center text-sm text-blue-600"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>10:00 AM - 12:00 PM</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 activity-card transition duration-300 shadow-md hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4"> |
| <i class="fas fa-utensils text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Lunch Rush</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Popular lunch spots like Sweet Kiwi, Yellow Chilli, and Terra Kulture are packed. Many opt for quick meals from local bukas or food delivery services like Bolt Food.</p> |
| <div class="flex items-center text-sm text-green-600"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>12:30 PM - 2:00 PM</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 activity-card transition duration-300 shadow-md hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4"> |
| <i class="fas fa-shopping-bag text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">After-Work Errands</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Markets like Balogun and Computer Village see increased activity as people run errands after work. Malls like Ikeja City Mall and The Palms are also busy.</p> |
| <div class="flex items-center text-sm text-yellow-600"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>5:00 PM - 7:00 PM</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 activity-card transition duration-300 shadow-md hover:shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-4"> |
| <i class="fas fa-glass-cheers text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Monday Night Socials</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Despite being a weekday, Lagos nightlife starts early. Spots like Quilox, Hard Rock Cafe, and The Place host "Monday Night" events with discounted drinks.</p> |
| <div class="flex items-center text-sm text-red-600"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>7:00 PM - 12:00 AM</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tips" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Monday Survival Tips for Lagos</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Navigate your Monday like a true Lagosian with these pro tips</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300"> |
| <div class="w-16 h-16 monday-gradient rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto"> |
| 1 |
| </div> |
| <h3 class="text-xl font-semibold text-center mb-4">Beat the Traffic</h3> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Leave home before 5:30 AM if possible</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Use alternative routes like local government roads</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Consider bike taxis (okada) for short distances</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300"> |
| <div class="w-16 h-16 monday-gradient rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto"> |
| 2 |
| </div> |
| <h3 class="text-xl font-semibold text-center mb-4">Productivity Hacks</h3> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Prepare your Monday tasks on Friday evening</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Schedule important meetings for mid-morning</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Use traffic time for calls or podcasts</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300"> |
| <div class="w-16 h-16 monday-gradient rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto"> |
| 3 |
| </div> |
| <h3 class="text-xl font-semibold text-center mb-4">Self-Care Essentials</h3> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Pack healthy snacks to avoid junk food cravings</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Stay hydrated - Lagos heat plus AC can be dehydrating</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Wind down with light exercise or meditation</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">What Lagosians Say About Mondays</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Real experiences from people navigating Lagos every Monday</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amina" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Amina O.</h4> |
| <p class="text-gray-500 text-sm">Banker, Victoria Island</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic mb-4">"I've learned to schedule all my important meetings for Tuesday. Monday is for catching up and adjusting to the week. The traffic alone can ruin your whole day's schedule!"</p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Emeka" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Emeka C.</h4> |
| <p class="text-gray-500 text-sm">Tech Entrepreneur, Yaba</p> |
| </div> |
| </div> |
| <p class="text-gray-600 italic mb-4">"Monday in Lagos is a different beast. I use the morning traffic time to listen to business podcasts and plan my week. By the time I get to the office, I'm already in work mode."</p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 monday-gradient text-white"> |
| <div class="container mx-auto px-6"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h2 class="text-3xl font-bold mb-6">Get Monday Tips Delivered Weekly</h2> |
| <p class="text-xl mb-8">Join our newsletter for weekly Lagos Monday survival tips, traffic updates, and productivity hacks.</p> |
| |
| <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-6 py-3 rounded-lg focus:outline-none text-gray-800"> |
| <button type="submit" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300 whitespace-nowrap"> |
| Subscribe <i class="fas fa-paper-plane ml-2"></i> |
| </button> |
| </form> |
| |
| <p class="mt-4 text-sm opacity-80">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full monday-gradient flex items-center justify-center text-white font-bold text-xl"> |
| M |
| </div> |
| <span class="ml-3 text-xl font-semibold">Monday Vibes</span> |
| </div> |
| <p class="text-gray-400">Helping Lagosians navigate their Mondays since 2023.</p> |
| <div class="flex space-x-4 mt-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
| <li><a href="#activities" class="text-gray-400 hover:text-white transition">Activities</a></li> |
| <li><a href="#tips" class="text-gray-400 hover:text-white transition">Tips</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Traffic Updates</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Productivity Tools</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Lagos Events</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Food Delivery</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i> |
| <span class="text-gray-400">24, Monday Street, Victoria Island, Lagos</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-phone-alt mt-1 mr-3 text-gray-400"></i> |
| <span class="text-gray-400">+234 800 000 0000</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-envelope mt-1 mr-3 text-gray-400"></i> |
| <span class="text-gray-400">hello@mondayvibes.ng</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 Monday Vibes. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); |
| const navLinks = document.querySelector('nav'); |
| |
| mobileMenuButton.addEventListener('click', function() { |
| navLinks.classList.toggle('hidden'); |
| navLinks.classList.toggle('flex'); |
| navLinks.classList.toggle('flex-col'); |
| navLinks.classList.toggle('absolute'); |
| navLinks.classList.toggle('top-16'); |
| navLinks.classList.toggle('left-0'); |
| navLinks.classList.toggle('right-0'); |
| navLinks.classList.toggle('bg-white'); |
| navLinks.classList.toggle('p-4'); |
| navLinks.classList.toggle('space-y-4'); |
| navLinks.classList.toggle('shadow-md'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!navLinks.classList.contains('hidden')) { |
| mobileMenuButton.click(); |
| } |
| } |
| }); |
| }); |
| }); |
| </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=DocHoax/dhx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
