Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TravelinLite - Your Gateway to Lightweight Adventures</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .parallax-bg { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-white shadow-lg transition-all duration-300" id="navbar"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i> | |
| <span class="text-2xl font-bold gradient-text">TravelinLite</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a> | |
| <a href="destinations.html" class="text-gray-700 hover:text-purple-600 transition-colors">Destinations</a> | |
| <a href="packages.html" class="text-gray-700 hover:text-purple-600 transition-colors">Packages</a> | |
| <a href="blog.html" class="text-gray-700 hover:text-purple-600 transition-colors">Blog</a> | |
| <a href="contact.html" class="text-gray-700 hover:text-purple-600 transition-colors">Contact</a> | |
| <button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition-colors"> | |
| Book Now | |
| </button> | |
| </div> | |
| <button class="md:hidden" id="mobileMenuBtn"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="hidden md:hidden bg-white border-t" id="mobileMenu"> | |
| <div class="px-6 py-4 space-y-3"> | |
| <a href="#home" class="block text-gray-700 hover:text-purple-600">Home</a> | |
| <a href="destinations.html" class="block text-gray-700 hover:text-purple-600">Home</a> | |
| <a href="destinations.html" class="block text-gray-700 hover:text-purple-600">Destinations</a> | |
| <a href="packages.html" class="block text-gray-700 hover:text-purple-600">Destinations</a> | |
| <a href="packages.html" class="block text-gray-700 hover:text-purple-600">Packages</a> | |
| <a href="blog.html" class="block text-gray-700 hover:text-purple-600">Packages</a> | |
| <a href="blog.html" class="block text-gray-700 hover:text-purple-600">Blog</a> | |
| <a href="contact.html" class="block text-gray-700 hover:text-purple-600">Contact</a> | |
| <button class="w-full bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700"> | |
| Book Now | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center relative parallax-bg" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://static.photos/travel/1200x630/101');"> | |
| <div class="container mx-auto px-6 text-center text-white"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 floating"> | |
| Travel Light, Live Bright | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto"> | |
| Discover the world with minimal baggage and maximum experiences. Your journey to lightweight adventures starts here. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="destinations.html" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition-all transform hover:scale-105"> | |
| Explore Destinations | |
| </a> | |
| <a href="packages.html" class="glass-effect text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:bg-opacity-20 transition-all text-center"> | |
| View Packages | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="w-8 h-8 text-white"></i> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4 gradient-text">Why Choose TravelinLite?</h2> | |
| <p class="text-gray-600 text-lg max-w-2xl mx-auto"> | |
| We make traveling easier, lighter, and more enjoyable with our innovative approach to adventure. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center card-hover bg-gray-50 p-8 rounded-2xl"> | |
| <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="zap" class="text-purple-600 w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Lightning Fast</h3> | |
| <p class="text-gray-600"> | |
| Quick booking process and instant confirmations for your peace of mind. | |
| </p> | |
| </div> | |
| <div class="text-center card-hover bg-gray-50 p-8 rounded-2xl"> | |
| <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="shield" class="text-purple-600 w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Safe & Secure</h3> | |
| <p class="text-gray-600"> | |
| Your safety is our priority with 24/7 support and secure transactions. | |
| </p> | |
| </div> | |
| <div class="text-center card-hover bg-gray-50 p-8 rounded-2xl"> | |
| <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="globe" class="text-purple-600 w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Global Coverage</h3> | |
| <p class="text-gray-600"> | |
| Access to destinations worldwide with local insights and recommendations. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Destinations Section --> | |
| <section id="destinations" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4 gradient-text">Popular Destinations</h2> | |
| <p class="text-gray-600 text-lg max-w-2xl mx-auto"> | |
| Explore our handpicked destinations perfect for lightweight travel enthusiasts. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer"> | |
| <img src="https://static.photos/nature/640x360/201" alt="Bali" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end"> | |
| <div class="p-6 text-white"> | |
| <h3 class="text-2xl font-bold mb-2">Bali, Indonesia</h3> | |
| <p class="text-sm">Tropical paradise with rich culture</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer"> | |
| <img src="https://static.photos/cityscape/640x360/202" alt="Tokyo" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end"> | |
| <div class="p-6 text-white"> | |
| <h3 class="text-2xl font-bold mb-2">Tokyo, Japan</h3> | |
| <p class="text-sm">Modern metropolis meets tradition</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer"> | |
| <img src="https://static.photos/travel/640x360/203" alt="Paris" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end"> | |
| <div class="p-6 text-white"> | |
| <h3 class="text-2xl font-bold mb-2">Paris, France</h3> | |
| <p class="text-sm">City of lights and romance</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer"> | |
| <img src="https://static.photos/nature/640x360/204" alt="Iceland" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end"> | |
| <div class="p-6 text-white"> | |
| <h3 class="text-2xl font-bold mb-2">Iceland</h3> | |
| <p class="text-sm">Land of fire and ice</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer"> | |
| <img src="https://static.photos/technology/640x360/205" alt="Dubai" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end"> | |
| <div class="p-6 text-white"> | |
| <h3 class="text-2xl font-bold mb-2">Dubai, UAE</h3> | |
| <p class="text-sm">Futuristic oasis in the desert</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer"> | |
| <img src="https://static.photos/food/640x360/206" alt="Italy" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end"> | |
| <div class="p-6 text-white"> | |
| <h3 class="text-2xl font-bold mb-2">Rome, Italy</h3> | |
| <p class="text-sm">Ancient history comes alive</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 hero-gradient text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8 text-center"> | |
| <div> | |
| <h3 class="text-4xl font-bold mb-2 counter" data-target="150">0</h3> | |
| <p class="text-lg">Destinations</p> | |
| </div> | |
| <div> | |
| <h3 class="text-4xl font-bold mb-2 counter" data-target="50000">0</h3> | |
| <p class="text-lg">Happy Travelers</p> | |
| </div> | |
| <div> | |
| <h3 class="text-4xl font-bold mb-2 counter" data-target="98">0</h3> | |
| <p class="text-lg">Satisfaction %</p> | |
| </div> | |
| <div> | |
| <h3 class="text-4xl font-bold mb-2 counter" data-target="24">0</h3> | |
| <p class="text-lg">Support Hours</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-4xl font-bold mb-6 gradient-text">About TravelinLite</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Founded in 2020, TravelinLite revolutionized the way people explore the world. We believe that the best adventures come with the lightest baggage. | |
| </p> | |
| <p class="text-gray-600 mb-8"> | |
| Our platform connects travelers with curated experiences, ensuring every journey is memorable, affordable, and hassle-free. From backpacking through Southeast Asia to weekend getaways in Europe, we've got you covered. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i> | |
| <span class="text-gray-700">Expert Guides</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i> | |
| <span class="text-gray-700">Best Prices</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i> | |
| <span class="text-gray-700">24/7 Support</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://static.photos/people/640x360/301" alt="Team" class="rounded-2xl shadow-2xl"> | |
| <div class="absolute -bottom-6 -right-6 bg-purple-600 text-white p-6 rounded-2xl"> | |
| <h3 class="text-2xl font-bold">4+ Years</h3> | |
| <p>Of Excellence</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-6 gradient-text">Ready to Start Your Journey?</h2> | |
| <p class="text-gray-600 text-lg mb-8 max-w-2xl mx-auto"> | |
| Join thousands of travelers who have discovered the joy of lightweight adventures with TravelinLite. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto"> | |
| <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-3 rounded-full border border-gray-300 focus:outline-none focus:border-purple-600"> | |
| <button class="bg-purple-600 text-white px-8 py-3 rounded-full hover:bg-purple-700 transition-all transform hover:scale-105"> | |
| Sign Up | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="map-pin" class="text-purple-400 w-6 h-6"></i> | |
| <span class="text-xl font-bold">TravelinLite Pro</span> | |
| </div> | |
| <p class="text-gray-400"> | |
| Your gateway to featherweight adventures around the world. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li> | |
| <li><a href="destinations.html" class="hover:text-white transition-colors">Destinations</a></li> | |
| <li><a href="packages.html" class="hover:text-white transition-colors">Packages</a></li> | |
| <li><a href="blog.html" class="hover:text-white transition-colors">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Safety Info</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="youtube" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> | |
| <p>© 2024 TravelinLite Pro. All rights reserved. Made with ❤️ for travelers.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile Menu Toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Navbar Scroll Effect | |
| window.addEventListener('scroll', () => { | |
| const navbar = document.getElementById('navbar'); | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('shadow-xl'); | |
| } else { | |
| navbar.classList.remove('shadow-xl'); | |
| } | |
| }); | |
| // Smooth Scrolling for Navigation Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Counter Animation | |
| const counters = document.querySelectorAll('.counter'); | |
| const speed = 200; | |
| const countUp = () => { | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(countUp, 10); | |
| } else { | |
| counter.innerText = target.toLocaleString(); | |
| } | |
| }); | |
| }; | |
| // Trigger counter animation when in viewport | |
| const observerOptions = { | |
| threshold: 0.5 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| countUp(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| const statsSection = document.querySelector('.counter').parentElement.parentElement; | |
| observer.observe(statsSection); | |
| // Fade in animations on scroll | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.card-hover'); | |
| elements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementBottom = element.getBoundingClientRect().bottom; | |
| if (elementTop < window.innerHeight && elementBottom > 0) { | |
| element.classList.add('slide-in'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| animateOnScroll(); // Initial check | |
| // Add parallax effect to hero section | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallax = document.querySelector('.parallax-bg'); | |
| if (parallax) { | |
| parallax.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |