Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM
HTML Editor

<body class="font-sans text-gray-900">

  <!-- HERO SECTION -->
  <section class="hero flex items-center justify-center text-center text-white">
    <div class="overlay"></div>
    <div class="relative z-10 max-w-3xl px-6" data-aos="fade-up">
      <h1 class="text-5xl md:text-6xl font-bold mb-4">
        
        Tour Avistamiento de Ballenas
      </h1>
      <p class="text-xl mb-8">
        Vive una experiencia inolvidable en el Mar de Cortés, Loreto – Baja California Sur.
      </p>
      <a href="#contacto" class="bg-blue-500 hover:bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold transition">
        <i class="fab fa-whatsapp"></i> Reserva Ahora
      </a>
    </div>
  </section>

  <!-- SECCIÓN “Sobre el Tour” -->
  <section class="py-20 px-6 bg-white text-center">
    <div class="max-w-4xl mx-auto" data-aos="fade-up">
      <h2 class="text-3xl font-bold mb-6">
        <i class="far fa-calendar-check"></i>
        ¿Qué incluye el tour?
      </h2>
      <p class="text-gray-600 text-lg leading-relaxed">
        Nuestro tour de avistamiento de ballenas te lleva a las aguas frente a Loreto, donde podrás ver ejemplares de ballena gris, azul y otros mamíferos marinos. Con guías expertos, lancha segura, equipo de snorkel y respeto absoluto por la naturaleza. ¡Una aventura que recordarás para siempre!
      </p>
    </div>
  </section>

  <!-- SECCIÓN BENEFICIOS / INCLUYE -->
  <section class="py-20 bg-gray-50">
    <div class="max-w-6xl mx-auto px-6 text-center">
      <h2 class="text-3xl font-bold mb-12" data-aos="fade-up">
        <i class="far fa-edit"></i>
        Tu experiencia incluye:
      </h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white rounded-xl shadow-lg p-8" data-aos="zoom-in">
          <center><img src="https://oficinavirtualbcs.com/imagen/bg-masthead.jpg" width="100%"> </center><br>
          <h3 class="text-xl font-semibold mb-2">Guía experto certificado</h3>
          <p class="text-gray-600">Profesionales locales con años de experiencia en la observación de mamíferos marinos.</p>
        </div>
        <div class="bg-white rounded-xl shadow-lg p-8" data-aos="zoom-in" data-aos-delay="150">
          <center><img src="https://oficinavirtualbcs.com/imagen/bg-masthead.jpg" width="100%"> </center><br>
          <h3 class="text-xl font-semibold mb-2">Lancha ecológica cómoda</h3>
          <p class="text-gray-600">Navegación segura con equipo moderno, vistas 360° y normas de conservación.</p>
        </div>
        <div class="bg-white rounded-xl shadow-lg p-8" data-aos="zoom-in" data-aos-delay="300">
          <center><img src="https://oficinavirtualbcs.com/imagen/bg-masthead.jpg" width="100%"> </center><br>
          <h3 class="text-xl font-semibold mb-2">Fotografía profesional</h3>
          <p class="text-gray-600">Captura tus recuerdos con la opción de fotógrafo profesional a bordo.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- SECCIÓN TESTIMONIOS -->
  <section class="py-20 bg-white text-center">
    <div class="max-w-5xl mx-auto px-6">
      <h2 class="text-3xl font-bold mb-12" data-aos="fade-up">
        <i class="far fa-heart"></i>
        Opiniones de viajeros
      </h2>
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-gray-50 p-6 rounded-xl shadow-md" data-aos="fade-right">
          <p class="italic text-gray-700">“Ver a una ballena azul pasar junto al bote fue una de las experiencias más emocionantes de mi vida.”</p>
          <h4 class="mt-4 font-semibold text-blue-600">
            <i class="far fa-thumbs-up"></i>
            Mariana G.
          </h4>
        </div>
        <div class="bg-gray-50 p-6 rounded-xl shadow-md" data-aos="fade-left">
          <p class="italic text-gray-700">“Un equipo increíble y respetuoso con los animales. Loreto es mágico.”</p>
          <h4 class="mt-4 font-semibold text-blue-600">
            <i class="far fa-thumbs-up"></i>
            Rodrigo V.
          </h4>
        </div>
      </div>
    </div>
  </section>

  <!-- SECCIÓN RESERVA / CONTACTO -->
  <section id="contacto" class="py-20 bg-blue-900 text-center text-white">
    <div class="max-w-3xl mx-auto px-6" data-aos="zoom-in">
      <h2 class="text-3xl font-bold mb-6">
        <i class='fab fa-whatsapp' style='font-size:36px'></i>
        Reserva tu tour ahora
      </h2>
      <p class="text-blue-200 mb-8">
        ¿Listo para zarpar? Contáctanos por WhatsApp para reservar. Responde en minutos.
      </p>

      <form id="formContacto" class="grid md:grid-cols-2 gap-6 text-left">
        <input type="text" id="inputNombre" placeholder="Tu nombre" class="p-3 rounded-md w-full text-gray-900" required>
        <input type="email" id="inputCorreo" placeholder="Tu correo" class="p-3 rounded-md w-full text-gray-900" required>
        <input type="text" id="inputTelefono" placeholder="Tu WhatsApp (opcional)" class="p-3 rounded-md w-full text-gray-900 md:col-span-2">
        <textarea id="inputMensaje" placeholder="Mensaje o fecha preferida" class="p-3 rounded-md w-full text-gray-900 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">
          <i class="fab fa-whatsapp"></i>
          Enviar vía WhatsApp
        </button>
      </form>
      <p id="msgEnvio" class="hidden mt-4 text-green-300 font-semibold">
        <i class="fa-solid fa-check-circle mr-2"></i>
        ¡Tu solicitud ha sido enviada!
      </p>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="bg-blue-950 text-gray-300 py-8 text-center">
    <p>&copy; 2025 Tours Loreto BCS. Todos los derechos reservados.</p>
    <div class="mt-3">
      <a href="#" class="text-yellow-400 hover:text-yellow-300 mx-2"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-yellow-400 hover:text-yellow-300 mx-2"><i class="fab fa-instagram"></i></a>
      <a href="#" class="text-yellow-400 hover:text-yellow-300 mx-2"><i class="fab fa-tiktok"></i></a>
    </div>
  </footer>

  <!-- BOTÓN WHATSAPP FLOTANTE -->
  <a href="https://wa.me/5216121234567?text=¡Hola!%20Quiero%20reservar%20el%20tour%20de%20avistamiento%20de%20ballenas" target="_blank"
     class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-xl text-3xl z-50 animate-bounce">
    <i class='fab fa-whatsapp' style='font-size:46px'></i>
  </a>
  <!-- AOS JS -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init({ duration: 800, once: true });

    document.getElementById("formContacto").addEventListener("submit", function(e){
      e.preventDefault();
      const nombre = document.getElementById("inputNombre").value;
      const correo = document.getElementById("inputCorreo").value;
      const telefono = document.getElementById("inputTelefono").value;
      const mensaje = document.getElementById("inputMensaje").value;

      const whatsappLink = `https://wa.me/5216121234567?text=Hola!%20Soy%20${encodeURIComponent(nombre)}.%20Mi correo: ${encodeURIComponent(correo)}.%20Mi WhatsApp: ${encodeURIComponent(telefono)}.%20Mensaje:%20${encodeURIComponent(mensaje)}`;

      window.open(whatsappLink, "_blank");

      document.getElementById("msgEnvio").classList.remove("hidden");
      this.reset();
    });
  </script>
HTML Editor

CSS Editor

JS Editor

HTML Editor

CSS Editor

JS Editor

Gestión de Landing
