Spaces:
Running
Running
File size: 14,877 Bytes
f209c2c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 |
<!DOCTYPE html>
<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> |