Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Us - TravelinLite Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></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; | |
| } | |
| .contact-card { | |
| transition: all 0.3s ease; | |
| } | |
| .contact-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| } | |
| .form-input:focus { | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <a href="index.html" 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 Pro</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" 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-purple-600 font-semibold">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> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 bg-gradient-to-r from-green-500 to-blue-600 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6"> | |
| Get in Touch | |
| </h1> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto"> | |
| We're here to help you plan your next lightweight adventure. Reach out to us anytime! | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <!-- Contact Form --> | |
| <div class="contact-card bg-gray-50 rounded-2xl p-8"> | |
| <h2 class="text-3xl font-bold mb-8 gradient-text">Send us a Message</h2> | |
| <form class="space-y-6" id="contactForm"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Full Name</label> | |
| <input type="text" class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="Enter your full name" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="Enter your email" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Subject</label> | |
| <input type="text" class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="What is this regarding?" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Message</label> | |
| <textarea class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="Tell us about your travel plans..." rows="5" required></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-purple-600 text-white py-4 rounded-lg hover:bg-purple-700 transition-colors"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Contact Info --> | |
| <div class="space-y-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 gradient-text">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="phone" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Phone</h4> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="mail" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Email</h4> | |
| <p class="text-gray-600">hello@travelinlitepro.com</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="clock" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Office Hours</h4> | |
| <p class="text-gray-600">Monday - Friday: 9AM - 6PM</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="map-pin" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Address</h4> | |
| <p class="text-gray-600">123 Adventure Street, Travel City, TC 12345</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Frequently Asked Questions</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="contact-card bg-white rounded-2xl p-8"> | |
| <h3 class="text-xl font-bold mb-4">How far in advance should I book my trip?</h3> | |
| <p class="text-gray-600"> | |
| We recommend booking at least 3-6 months in advance for the best deals and availability. | |
| </p> | |
| </div> | |
| <div class="contact-card bg-white rounded-2xl p-8"> | |
| <h3 class="text-xl font-bold mb-4">What is your cancellation policy?</h3> | |
| <p class="text-gray-600"> | |
| You can cancel your booking up to 30 days before departure for a full refund. | |
| </p> | |
| </div> | |
| <div class="contact-card bg-white rounded-2xl p-8"> | |
| <h3 class="text-xl font-bold mb-4">Do you offer travel insurance?</h3> | |
| <p class="text-gray-600"> | |
| Yes, we offer comprehensive travel insurance options to protect your investment. | |
| </p> | |
| </div> | |
| <div class="contact-card bg-white rounded-2xl p-8"> | |
| <h3 class="text-xl font-bold mb-4">Can I customize my travel package?</h3> | |
| <p class="text-gray-600"> | |
| Absolutely! All our packages can be customized to fit your specific needs and preferences. | |
| </p> | |
| </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> | |
| feather.replace(); | |
| // Contact form submission | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const formData = { | |
| name: this.querySelector('input[type="text"]').value, | |
| email: this.querySelector('input[type="email"]').value, | |
| subject: this.querySelectorAll('input[type="text"]')[1].value, | |
| message: this.querySelector('textarea').value | |
| }; | |
| // Simulate form submission | |
| setTimeout(() => { | |
| alert('Thank you for your message! We will get back to you within 24 hours.'); | |
| this.reset(); | |
| }, 1000); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| mobileMenuBtn.addEventListener('click', function() { | |
| alert('Mobile menu would open here'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |