File size: 12,194 Bytes
fd25c3d | 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 | <!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/Navigation -->
<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>
<!-- Mobile Menu -->
<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>
<!-- Hero Section -->
<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>
<!-- Search 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>
<!-- Popular Destinations -->
<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">
<!-- Destination 1 -->
<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>
<!-- Destination 2 -->
<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> |