Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM
HTML Editor

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

  <!-- HERO -->
  <header class="relative h-screen flex flex-col justify-center items-center text-center text-white overflow-hidden">
    <video autoplay muted loop playsinline class="absolute w-full h-full object-cover">
      <source src="https://oficinavirtualbcs.com/videos/botas.mp4" type="video/mp4" />
    </video>
    <div class="absolute inset-0 bg-black opacity-50"></div>
    <div class="relative z-10 px-4">
      <h1 class="text-5xl md:text-6xl font-extrabold drop-shadow-lg">Descubre Loreto, Baja California Sur</h1>
      <p class="text-xl md:text-2xl mt-4 max-w-2xl mx-auto">Tours, naturaleza y aventura en el corazón del Mar de Cortés</p>
      <a href="#tours" class="mt-6 inline-block bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-8 rounded-full text-lg font-semibold transition">Explorar Tours</a>
    </div>
  </header>

  <!-- TOURS -->
  <section id="tours" class="py-20 bg-gray-50">
    <div class="max-w-6xl mx-auto px-6 text-center">
      <h2 class="text-3xl font-bold mb-10">Tours más populares</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <!-- CARD -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:-translate-y-1 transition">
          <img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1" class="w-full h-56 object-cover" alt="Islas Loreto">
          <div class="p-6 text-left">
            <h3 class="text-xl font-bold mb-2">Tour Islas de Loreto</h3>
            <p class="text-gray-600 mb-4">Navega entre delfines, tortugas y playas vírgenes. Ideal para fotos y snorkel.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$1,200 MXN</span>
              <a href="#reserva" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Reservar</a>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:-translate-y-1 transition">
          <img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29" class="w-full h-56 object-cover" alt="Avistamiento de 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 un espectáculo natural con guías locales expertos. Temporada: enero-marzo.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$1,800 MXN</span>
              <a href="#reserva" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Reservar</a>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:-translate-y-1 transition">
          <img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1" class="w-full h-56 object-cover" alt="Kayak al Amanecer">
          <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 en silencio mientras el sol ilumina la Sierra de la Giganta. Magia pura.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$900 MXN</span>
              <a href="#reserva" 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>

  <!-- TESTIMONIOS -->
  <section class="py-20 bg-white">
    <div class="max-w-5xl mx-auto text-center px-6">
      <h2 class="text-3xl font-bold mb-12">Opiniones de nuestros viajeros</h2>
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-gray-50 p-6 rounded-xl shadow-md">
          <p class="italic text-gray-600">“Fue la mejor experiencia de mi vida. Vimos ballenas a unos metros del bote. ¡Increíble servicio!”</p>
          <h4 class="mt-4 font-semibold text-yellow-600">— María L.</h4>
        </div>
        <div class="bg-gray-50 p-6 rounded-xl shadow-md">
          <p class="italic text-gray-600">“El tour de kayak fue mágico. Ver el amanecer desde el mar no tiene precio.”</p>
          <h4 class="mt-4 font-semibold text-yellow-600">— Jorge R.</h4>
        </div>
      </div>
    </div>
  </section>

  <!-- RESERVA -->
  <section id="reserva" class="py-20 bg-gray-50">
    <div class="max-w-4xl mx-auto text-center px-6">
      <h2 class="text-3xl font-bold mb-8">Reserva tu aventura</h2>
      <p class="text-gray-600 mb-6">Rellena el formulario y te contactaremos por WhatsApp o correo.</p>
      <form id="tourForm" class="grid md:grid-cols-2 gap-6 text-left">
        <input type="text" id="nombre" placeholder="Tu nombre" class="border p-3 rounded-md w-full" required>
        <input type="email" id="correo" placeholder="Tu correo" class="border p-3 rounded-md w-full" required>
        <input type="text" id="tour" placeholder="Tour de interés" class="border p-3 rounded-md w-full md:col-span-2" required>
        <textarea id="mensaje" placeholder="Mensaje o fecha preferida" class="border p-3 rounded-md w-full md:col-span-2"></textarea>
        <button type="submit" 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>
      <p id="msg" class="mt-4 text-green-600 font-semibold hidden">✅ ¡Tu mensaje ha sido enviado!</p>
    </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>

  <!-- BOTÓN WHATSAPP -->
  <a href="https://wa.me/5216121234567?text=¡Hola!%20Quiero%20reservar%20un%20tour%20en%20Loreto" target="_blank" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg text-2xl transition">
    <i class="fab fa-whatsapp fa-2x"></i>
  </a>
HTML Editor

CSS Editor

JS Editor

HTML Editor

CSS Editor

JS Editor

Gestión de Landing
