| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Explora Mundi - Sua Agência de Viagens</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;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .hero { |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1499678329028-101435549a4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .destination-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); |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: scale(1.05); |
| } |
| |
| .newsletter { |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .mobile-menu { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-plane-departure text-3xl text-blue-600 mr-2"></i> |
| <span class="text-2xl font-bold text-blue-600">Explora Mundi</span> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="text-gray-700 hover:text-blue-600 font-medium">Início</a> |
| <a href="#destinations" class="text-gray-700 hover:text-blue-600 font-medium">Destinos</a> |
| <a href="#packages" class="text-gray-700 hover:text-blue-600 font-medium">Pacotes</a> |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 font-medium">Depoimentos</a> |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 font-medium">Contato</a> |
| </nav> |
| |
| <div class="hidden md:flex items-center space-x-4"> |
| <button class="px-4 py-2 text-blue-600 font-medium hover:bg-blue-50 rounded-lg">Login</button> |
| <button class="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">Cadastre-se</button> |
| </div> |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white w-full absolute left-0 top-full shadow-lg"> |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> |
| <a href="#home" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b">Início</a> |
| <a href="#destinations" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b">Destinos</a> |
| <a href="#packages" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b">Pacotes</a> |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b">Depoimentos</a> |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b">Contato</a> |
| <div class="flex flex-col space-y-2 pt-2"> |
| <button class="w-full px-4 py-2 text-blue-600 font-medium hover:bg-blue-50 rounded-lg border border-blue-600">Login</button> |
| <button class="w-full px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">Cadastre-se</button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero min-h-screen flex items-center justify-center text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Descubra o Mundo Conosco</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Explore destinos incríveis com pacotes personalizados e experiências únicas que ficarão para sempre na sua memória.</p> |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> |
| <button class="px-8 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition transform hover:scale-105">Explorar Destinos</button> |
| <button class="px-8 py-3 bg-transparent border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:text-blue-600 transition transform hover:scale-105">Assistir Vídeo</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white py-12 -mt-20 relative z-10 shadow-lg rounded-lg mx-4 md:mx-10 lg:mx-20"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div class="relative"> |
| <label class="block text-gray-700 font-medium mb-2">Destino</label> |
| <input type="text" placeholder="Para onde vamos?" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-map-marker-alt absolute right-3 top-10 text-gray-400"></i> |
| </div> |
| |
| <div class="relative"> |
| <label class="block text-gray-700 font-medium mb-2">Tipo</label> |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"> |
| <option>Selecione</option> |
| <option>Praia</option> |
| <option>Montanha</option> |
| <option>Cidade</option> |
| <option>Aventura</option> |
| </select> |
| <i class="fas fa-chevron-down absolute right-3 top-10 text-gray-400"></i> |
| </div> |
| |
| <div class="relative"> |
| <label class="block text-gray-700 font-medium mb-2">Data</label> |
| <input type="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="far fa-calendar-alt absolute right-3 top-10 text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-end"> |
| <button class="w-full px-6 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-search mr-2"></i> Buscar |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="destinations" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Destinos Populares</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Explore nossos destinos mais procurados pelos viajantes. Cada lugar tem sua magia única esperando para ser descoberta.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="destination-card bg-white rounded-xl overflow-hidden shadow-md transition duration-500"> |
| <div class="relative overflow-hidden h-64"> |
| <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Paris" class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">20% OFF</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800">Paris, França</h3> |
| <p class="text-gray-600"><i class="fas fa-map-marker-alt text-blue-500 mr-1"></i> Europa</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-gray-500 line-through">R$ 4.200</p> |
| <p class="text-blue-600 font-bold text-xl">R$ 3.360</p> |
| </div> |
| </div> |
| <div class="flex items-center mt-4"> |
| <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> |
| <span class="text-gray-600 ml-2">4.5 (120)</span> |
| </div> |
| <button class="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Detalhes</button> |
| </div> |
| </div> |
| |
| |
| <div class="destination-card bg-white rounded-xl overflow-hidden shadow-md transition duration-500"> |
| <div class="relative overflow-hidden h-64"> |
| <img src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1530&q=80" alt="Tóquio" class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800">Tóquio, Japão</h3> |
| <p class="text-gray-600"><i class="fas fa-map-marker-alt text-blue-500 mr-1"></i> Ásia</p> |
| </div> |
| <div class="text-right |
| <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=caio246/explora" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
