| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Jimbara Executive Lodge | Luxury Accommodation in Mansa, Zambia</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> |
| | .hero { |
| | background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
| | background-size: cover; |
| | background-position: center; |
| | height: 90vh; |
| | } |
| | |
| | .room-card:hover { |
| | transform: translateY(-10px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | |
| | .amenity-icon { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .amenity-icon:hover { |
| | transform: scale(1.1); |
| | color: #d97706; |
| | } |
| | |
| | .parallax { |
| | background-attachment: fixed; |
| | background-position: center; |
| | background-repeat: no-repeat; |
| | background-size: cover; |
| | } |
| | |
| | .testimonial-card { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .testimonial-card:hover { |
| | transform: scale(1.02); |
| | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .booking-form { |
| | background: rgba(255, 255, 255, 0.9); |
| | backdrop-filter: blur(5px); |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans bg-gray-50"> |
| | |
| | <nav class="bg-white shadow-lg fixed w-full z-10"> |
| | <div class="max-w-7xl mx-auto px-4"> |
| | <div class="flex justify-between items-center h-16"> |
| | <div class="flex items-center"> |
| | <a href="#" class="flex-shrink-0"> |
| | <span class="text-2xl font-bold text-amber-700">Jimbara</span> |
| | <span class="text-gray-600">Executive Lodge</span> |
| | </a> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-10 flex items-baseline space-x-4"> |
| | <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-amber-700 bg-amber-100">Home</a> |
| | <a href="#rooms" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-amber-700">Rooms</a> |
| | <a href="#amenities" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-amber-700">Amenities</a> |
| | <a href="#gallery" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-amber-700">Gallery</a> |
| | <a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-amber-700">Contact</a> |
| | </div> |
| | </div> |
| | <div class="md:hidden"> |
| | <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-amber-700 focus:outline-none"> |
| | <i class="fas fa-bars text-xl"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mobile-menu hidden md:hidden bg-white shadow-lg"> |
| | <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| | <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 bg-amber-100">Home</a> |
| | <a href="#rooms" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-amber-700">Rooms</a> |
| | <a href="#amenities" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-amber-700">Amenities</a> |
| | <a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-amber-700">Gallery</a> |
| | <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-amber-700">Contact</a> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section id="home" class="hero flex items-center justify-center text-center text-white pt-16"> |
| | <div class="max-w-4xl px-4"> |
| | <h1 class="text-4xl md:text-6xl font-bold mb-6">Experience Luxury in the Heart of Mansa</h1> |
| | <p class="text-xl md:text-2xl mb-8">Jimbara Executive Lodge offers premium accommodation with authentic Zambian hospitality in Luapula Province</p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| | <a href="#rooms" class="px-8 py-3 bg-amber-600 hover:bg-amber-700 rounded-lg font-semibold transition duration-300">Our Rooms</a> |
| | <a href="#contact" class="px-8 py-3 border-2 border-white hover:bg-white hover:text-gray-900 rounded-lg font-semibold transition duration-300">Book Now</a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-white"> |
| | <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-16 items-center"> |
| | <div class="mb-12 lg:mb-0"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-6">Welcome to Jimbara Executive Lodge</h2> |
| | <p class="text-gray-600 mb-4">Nestled in the beautiful Luapula Province of Zambia, Jimbara Executive Lodge provides a perfect blend of modern comfort and traditional Zambian charm. Our lodge is designed to offer you an unforgettable experience whether you're visiting for business or leisure.</p> |
| | <p class="text-gray-600 mb-6">Located in the heart of Mansa and adjacent to the Jimbara Mall, we're conveniently situated near major attractions and business centers, making us the ideal choice for discerning travelers.</p> |
| | <div class="flex flex-wrap gap-4"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-wifi text-amber-600 mr-2 text-xl"></i> |
| | <span class="text-gray-700">Free WiFi</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-shopping-cart text-amber-600 mr-2 text-xl"></i> |
| | <span class="text-gray-700">Adjacent to Jimbara Mall</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-utensils text-amber-600 mr-2 text-xl"></i> |
| | <span class="text-gray-700">Restaurant</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <i class="fas fa-parking text-amber-600 mr-2 text-xl"></i> |
| | <span class="text-gray-700">Secure Parking</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="relative"> |
| | <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Jimbara Lodge" class="rounded-lg shadow-xl w-full h-auto"> |
| | <div class="absolute -bottom-6 -right-6 bg-amber-600 p-4 rounded-lg shadow-lg hidden md:block"> |
| | <p class="text-white font-bold text-lg">Since 2010</p> |
| | <p class="text-white text-sm">Serving with excellence</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="rooms" class="py-20 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Accommodation</h2> |
| | <p class="text-xl text-gray-600 max-w-3xl mx-auto">Choose from our selection of beautifully appointed rooms and suites designed for your comfort</p> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="room-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> |
| | <img src="https://images.unsplash.com/photo-1611892440501-80c8e422a50c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Standard Room" class="w-full h-64 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold text-gray-900 mb-2">Standard Room</h3> |
| | <p class="text-gray-600 mb-4">Perfect for solo travelers or couples, featuring a comfortable queen-size bed and modern amenities.</p> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-amber-700 font-bold text-lg">ZMW 450/night</span> |
| | <a href="#contact" class="text-white bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg font-medium transition duration-300">Book Now</a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="room-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> |
| | <img src="https://images.unsplash.com/photo-1566669437685-bc1f8df81ddf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Deluxe Room" class="w-full h-64 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold text-gray-900 mb-2">Deluxe Room</h3> |
| | <p class="text-gray-600 mb-4">Spacious accommodation with king-size bed, sitting area, and premium amenities for enhanced comfort.</p> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-amber-700 font-bold text-lg">ZMW 650/night</span> |
| | <a href="#contact" class="text-white bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg font-medium transition duration-300">Book Now</a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="room-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> |
| | <img src="https://images.unsplash.com/photo-1566669437685-bc1f8df81ddf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Executive Suite" class="w-full h-64 object-cover"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold text-gray-900 mb-2">Executive Suite</h3> |
| | <p class="text-gray-600 mb-4">Our most luxurious option featuring separate living area, premium furnishings, and exclusive services.</p> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-amber-700 font-bold text-lg">ZMW 950/night</span> |
| | <a href="#contact" class="text-white bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg font-medium transition duration-300">Book Now</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-12"> |
| | <a href="#contact" class="inline-block px-8 py-3 border-2 border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white rounded-lg font-semibold transition duration-300">View All Rooms</a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="amenities" class="py-20 bg-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Amenities</h2> |
| | <p class="text-xl text-gray-600 max-w-3xl mx-auto">We provide exceptional facilities to make your stay comfortable and memorable</p> |
| | </div> |
| | |
| | <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
| | |
| | <div class="text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300"> |
| | <div class="amenity-icon mx-auto mb-4 text-4xl text-amber-600"> |
| | <i class="fas fa-utensils"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-900 mb-2">Restaurant & Bar</h3> |
| | <p class="text-gray-600">Enjoy delicious local and international cuisine at our on-site restaurant and unwind at our well-stocked bar.</p> |
| | </div> |
| | |
| | |
| | <div class="text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300"> |
| | <div class="amenity-icon mx-auto mb-4 text-4xl text-amber-600"> |
| | <i class="fas fa-shopping-cart"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-900 mb-2">Jimbara Mall</h3> |
| | <p class="text-gray-600">Convenient access to shopping, banking, and services right next door at Jimbara Mall.</p> |
| | </div> |
| | |
| | |
| | <div class="text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300"> |
| | <div class="amenity-icon mx-auto mb-4 text-4xl text-amber-600"> |
| | <i class="fas fa-wifi"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-900 mb-2">High-Speed WiFi</h3> |
| | <p class="text-gray-600">Stay connected with our complimentary high-speed internet access throughout the lodge.</p> |
| | </div> |
| | |
| | |
| | <div class="text-center p-6 rounded-lg hover:bg-gray-50 transition duration-300"> |
| | <div class="amenity-icon mx-auto mb-4 text-4xl text-amber-600"> |
| | <i class="fas fa-concierge-bell"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-900 mb-2">24/7 Concierge</h3> |
| | <p class="text-gray-600">Our friendly staff is available around the clock to assist with any requests or arrangements.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="gallery" class="py-20 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-4">Gallery</h2> |
| | <p class="text-xl text-gray-600 max-w-3xl mx-auto">A glimpse of the Jimbara Executive Lodge experience</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
| | <img src="https://images.unsplash.com/photo-1566669437685-bc1f8df81ddf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Lodge Interior" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1611892440501-80c8e422a50c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Room" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Lobby" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1582719471385-5adc0a1c4a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Restaurant" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Mall Entrance" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1496417263034-38ec4f0b665a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Conference Room" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1578683010236-d716f9a3f461?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bar Area" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Exterior" class="w-full h-48 object-cover rounded-lg shadow hover:shadow-lg transition duration-300"> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-amber-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Guests Say</h2> |
| | <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from travelers who have experienced our hospitality</p> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="testimonial-card bg-white p-6 rounded-lg shadow-md transition duration-300"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-amber-600 text-2xl mr-2"> |
| | <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> |
| | <p class="text-gray-600 mb-4">"The rooms are spacious and clean, with comfortable beds. The location next to Jimbara Mall is incredibly convenient for shopping and dining options."</p> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Guest" class="w-10 h-10 rounded-full mr-3"> |
| | <div> |
| | <h4 class="font-semibold text-gray-900">Sarah M.</h4> |
| | <p class="text-sm text-gray-500">Business Traveler</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="testimonial-card bg-white p-6 rounded-lg shadow-md transition duration-300"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-amber-600 text-2xl mr-2"> |
| | <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> |
| | <p class="text-gray-600 mb-4">"Excellent service and comfortable accommodations. The staff went above and beyond to make our stay pleasant. The proximity to the mall was a big plus!"</p> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Guest" class="w-10 h-10 rounded-full mr-3"> |
| | <div> |
| | <h4 class="font-semibold text-gray-900">David K.</h4> |
| | <p class="text-sm text-gray-500">Family Vacation</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="testimonial-card bg-white p-6 rounded-lg shadow-md transition duration-300"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-amber-600 text-2xl mr-2"> |
| | <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> |
| | <p class="text-gray-600 mb-4">"I've stayed at many lodges in Mansa, but Jimbara Executive Lodge stands out for its professional service and prime location. The restaurant food is delicious too!"</p> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Guest" class="w-10 h-10 rounded-full mr-3"> |
| | <div> |
| | <h4 class="font-semibold text-gray-900">Grace L.</h4> |
| | <p class="text-sm text-gray-500">Frequent Visitor</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contact" class="py-20 bg-white"> |
| | <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-16"> |
| | <div class="mb-12 lg:mb-0"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-6">Contact Us</h2> |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 text-amber-600 text-xl mt-1 mr-4"> |
| | <i class="fas fa-map-marker-alt"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-900">Address</h3> |
| | <p class="text-gray-600">Jimbara Complex, Mansa, Luapula Province, Zambia</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 text-amber-600 text-xl mt-1 mr-4"> |
| | <i class="fas fa-phone-alt"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-900">Phone</h3> |
| | <p class="text-gray-600">+260 123 456 789</p> |
| | <p class="text-gray-600">+260 987 654 321</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 text-amber-600 text-xl mt-1 mr-4"> |
| | <i class="fas fa-envelope"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-900">Email</h3> |
| | <p class="text-gray-600">info@jimbara-lodge.com</p> |
| | <p class="text-gray-600">reservations@jimbara-lodge.com</p> |
| | </div> |
| | </div> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 text-amber-600 text-xl mt-1 mr-4"> |
| | <i class="fas fa-clock"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-900">Reception Hours</h3> |
| | <p class="text-gray-600">24 hours / 7 days a week</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8"> |
| | <h3 class="text-xl font-semibold text-gray-900 mb-4">Connect With Us</h3> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-amber-600 hover:text-amber-700 text-2xl"> |
| | <i class="fab fa-facebook"></i> |
| | </a> |
| | <a href="#" class="text-amber-600 hover:text-amber-700 text-2xl"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="text-amber-600 hover:text-amber-700 text-2xl"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="text-amber-600 hover:text-amber-700 text-2xl"> |
| | <i class="fab fa-tripadvisor"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="booking-form p-8 rounded-lg shadow-lg"> |
| | <h2 class="text-3xl font-bold text-gray-900 mb-6">Book Your Stay</h2> |
| | <form> |
| | <div class="grid grid-cols-1 gap-6"> |
| | <div> |
| | <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| | <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| | <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"> |
| | </div> |
| | <div> |
| | <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
| | <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label for="check-in" class="block text-sm font-medium text-gray-700 mb-1">Check-in Date</label> |
| | <input type="date" id="check-in" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"> |
| | </div> |
| | <div> |
| | <label for="check-out" class="block text-sm font-medium text-gray-700 mb-1">Check-out Date</label> |
| | <input type="date" id="check-out" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"> |
| | </div> |
| | </div> |
| | <div> |
| | <label for="room-type" class="block text-sm font-medium text-gray-700 mb-1">Room Type</label> |
| | <select id="room-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"> |
| | <option>Standard Room</option> |
| | <option>Deluxe Room</option> |
| | <option>Executive Suite</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Special Requests</label> |
| | <textarea id="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"></textarea> |
| | </div> |
| | <div> |
| | <button type="submit" class="w-full px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition duration-300">Submit Booking Request</button> |
| | </div> |
| | </div> |
| | </form> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <div class="h-96 w-full"> |
| | <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3882.123456789012!2d28.123456789012345!3d-11.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTHCsDA3JzI0LjQiUyAyOMKwMDcnMjQuNCJF!5e0!3m2!1sen!2szm!4v1234567890123!5m2!1sen!2szm" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> |
| | </div> |
| |
|
| | |
| | <footer class="bg-gray-900 text-white py-12"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Jimbara Executive Lodge</h3> |
| | <p class="text-gray-400">Premium accommodation with authentic Zambian hospitality in the heart of Mansa.</p> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#home" class="text-gray-400 hover:text-amber-500 transition duration-300">Home</a></li> |
| | <li><a href="#rooms" class="text-gray-400 hover:text-amber-500 transition duration-300">Rooms</a></li> |
| | <li><a href="#amenities" class="text-gray-400 hover:text-amber-500 transition duration-300">Amenities</a></li> |
| | <li><a href="#gallery" class="text-gray-400 hover:text-amber-500 transition duration-300">Gallery</a></li> |
| | <li><a href="#contact" class="text-gray-400 hover:text-amber-500 transition duration-300">Contact</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold mb-4">Contact Info</h3> |
| | <ul class="space-y-2 text-gray-400"> |
| | <li class="flex items-start"> |
| | <i class="fas fa-map-marker-alt mt-1 mr-2 text-amber-500"></i> |
| | <span>Jimbara Complex, Mansa, Zambia</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-phone-alt mt-1 mr-2 text-amber-500"></i> |
| | <span>+260 123 456 789</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-envelope mt-1 mr-2 text-amber-500"></i> |
| | <span>info@jimbara-lodge.com</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold mb-4">Newsletter</h3> |
| | <p class="text-gray-400 mb-4">Subscribe to our newsletter for special offers and updates.</p> |
| | <form class="flex"> |
| | <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-900"> |
| | <button type="submit" class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-r-lg transition duration-300"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| | <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Jimbara Executive Lodge. All rights reserved.</p> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300"> |
| | <i class="fab fa-tripadvisor"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | |
| | <button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-600 text-white p-3 rounded-full shadow-lg hidden"> |
| | <i class="fas fa-arrow-up"></i> |
| | </button> |
| |
|
| | <script> |
| | |
| | const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
| | const mobileMenu = document.querySelector('.mobile-menu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | const backToTopButton = document.getElementById('back-to-top'); |
| | |
| | window.addEventListener('scroll', () => { |
| | if (window.pageYOffset > 300) { |
| | backToTopButton.classList.remove('hidden'); |
| | } else { |
| | backToTopButton.classList.add('hidden'); |
| | } |
| | }); |
| | |
| | backToTopButton.addEventListener('click', () => { |
| | window.scrollTo({ top: 0, behavior: 'smooth' }); |
| | }); |
| | |
| | |
| | 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 (!mobileMenu.classList.contains('hidden')) { |
| | mobileMenu.classList.add('hidden'); |
| | } |
| | } |
| | }); |
| | }); |
| | </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=Raversray/jimbara" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
