Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM
HTML Editor

<body class="font-sans bg-white text-gray-800">

  <!-- HERO -->
  <header class="bg-cover bg-center h-screen flex flex-col justify-center items-center text-center px-4" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e');">
    <h1 class="text-4xl md:text-6xl font-bold text-white drop-shadow-lg">Descubre Loreto, Baja California Sur</h1>
    <p class="text-lg md:text-2xl text-white mt-4 max-w-2xl">Tours inolvidables entre mar, desierto y montañas.</p>
    <a href="#tours" class="mt-6 bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-6 rounded-full text-lg font-semibold transition">Reserva tu Tour</a>
  </header>

  <!-- SECCIÓN DE TOURS -->
  <section id="tours" class="py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-6 text-center">
      <h2 class="text-3xl font-bold mb-10">Tours Populares</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <!-- CARD 1 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:-translate-y-1 transition">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" class="w-full h-56 object-cover" alt="Tour Loreto">
          <div class="p-6 text-left">
            <h3 class="text-xl font-bold mb-2">Islas de Loreto</h3>
            <p class="text-gray-600 mb-4">Explora las aguas cristalinas y la vida marina del Parque Nacional Bahía de Loreto.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$1,200 MXN</span>
              <a href="#contacto" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Reservar</a>
            </div>
          </div>
        </div>

        <!-- CARD 2 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:-translate-y-1 transition">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" class="w-full h-56 object-cover" alt="Tour Ballenas">
          <div class="p-6 text-left">
            <h3 class="text-xl font-bold mb-2">Avistamiento de Ballenas</h3>
            <p class="text-gray-600 mb-4">Vive la experiencia mágica de ver ballenas grises y azules en su hábitat natural.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$1,800 MXN</span>
              <a href="#contacto" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Reservar</a>
            </div>
          </div>
        </div>

        <!-- CARD 3 -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:-translate-y-1 transition">
          <img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1" class="w-full h-56 object-cover" alt="Tour Kayak">
          <div class="p-6 text-left">
            <h3 class="text-xl font-bold mb-2">Kayak al Amanecer</h3>
            <p class="text-gray-600 mb-4">Remar con el sol naciente frente a las montañas de la Sierra de la Giganta.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$900 MXN</span>
              <a href="#contacto" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Reservar</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- BENEFICIOS -->
  <section class="py-16 bg-white">
    <div class="max-w-5xl mx-auto text-center px-6">
      <h2 class="text-3xl font-bold mb-10">¿Por qué elegirnos?</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2">Guías Locales Expertos</h3>
          <p class="text-gray-600">Conocen cada rincón de Loreto y garantizan una experiencia auténtica y segura.</p>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2">Atención Personalizada</h3>
          <p class="text-gray-600">Nos adaptamos a tus intereses, tiempos y nivel de aventura.</p>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2">Compromiso Ecológico</h3>
          <p class="text-gray-600">Tours sustentables para proteger la belleza natural de Loreto.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- TESTIMONIOS -->
  <section class="py-16 bg-gray-50">
    <div class="max-w-5xl mx-auto text-center px-6">
      <h2 class="text-3xl font-bold mb-10">Lo que dicen nuestros viajeros</h2>
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-white p-6 rounded-xl shadow-md">
          <p class="italic text-gray-600">“Increíble experiencia, vimos delfines, tortugas y ballenas. ¡El guía fue excelente!”</p>
          <h4 class="mt-4 font-semibold text-yellow-600">— Ana G.</h4>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-md">
          <p class="italic text-gray-600">“Loreto es un paraíso, el tour fue organizado y súper divertido. 100% recomendado.”</p>
          <h4 class="mt-4 font-semibold text-yellow-600">— Carlos M.</h4>
        </div>
      </div>
    </div>
  </section>

  <!-- CONTACTO -->
  <section id="contacto" class="py-16 bg-white">
    <div class="max-w-4xl mx-auto px-6 text-center">
      <h2 class="text-3xl font-bold mb-8">Reserva tu aventura</h2>
      <form class="grid md:grid-cols-2 gap-6">
        <input type="text" placeholder="Tu nombre" class="border p-3 rounded-md w-full">
        <input type="email" placeholder="Tu correo" class="border p-3 rounded-md w-full">
        <input type="text" placeholder="Tour de interés" class="border p-3 rounded-md w-full md:col-span-2">
        <textarea placeholder="Mensaje o fecha preferida" class="border p-3 rounded-md w-full md:col-span-2"></textarea>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 rounded-full md:col-span-2 transition">Enviar Solicitud</button>
      </form>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="bg-gray-900 text-gray-300 py-8 text-center">
    <p>&copy; 2025 Tours Loreto BCS. Todos los derechos reservados.</p>
    <p class="text-sm mt-2">Síguenos: 
      <a href="#" class="text-yellow-500 hover:text-yellow-400 ml-2">Instagram</a> · 
      <a href="#" class="text-yellow-500 hover:text-yellow-400 ml-1">Facebook</a>
    </p>
  </footer>

</body>
HTML Editor

CSS Editor

JS Editor

HTML Editor

CSS Editor

JS Editor

Gestión de Landing
