Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM
HTML Editor

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

  <!-- HERO -->
  <header class="relative h-screen flex items-center justify-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-60"></div>
    <div class="relative z-10 px-4" data-aos="fade-up">
      <h1 class="text-5xl md:text-6xl font-extrabold mb-4 drop-shadow-lg">
        <i class="fas fa-water text-yellow-400"></i> Avistamiento de Ballenas en Loreto
      </h1>
      <p class="text-lg md:text-2xl mb-6 max-w-2xl mx-auto">Una experiencia majestuosa entre gigantes del océano en el corazón del Mar de Cortés.</p>
      <a href="#reserva" class="bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-8 rounded-full font-semibold text-lg transition">
        <i class="fas fa-calendar-check mr-2"></i> Reserva tu lugar
      </a>
    </div>
  </header>

  <!-- SECCIÓN DESCRIPCIÓN -->
  <section class="py-20 px-6 bg-white text-center">
    <div class="max-w-5xl mx-auto" data-aos="fade-up">
      <h2 class="text-3xl font-bold mb-6"><i class="fas fa-info-circle text-yellow-500 mr-2"></i> Sobre el Tour</h2>
      <p class="text-gray-600 text-lg leading-relaxed">
        Loreto es uno de los mejores lugares del mundo para ver ballenas grises y azules. 
        De enero a marzo, estos gigantes recorren miles de kilómetros desde el Ártico para dar a luz en las cálidas aguas del Golfo de California.  
        Nuestro tour te lleva en un recorrido guiado por expertos locales donde podrás ver ballenas, delfines y aves marinas — todo en un ambiente respetuoso con la naturaleza.
      </p>
    </div>
  </section>

  <!-- PARALLAX IMAGEN -->
  <section class="parallax h-[60vh] bg-fixed bg-center bg-cover" style="background-image: url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2');"></section>

  <!-- INCLUYE -->
  <section class="py-20 bg-gray-50 text-center">
    <div class="max-w-6xl mx-auto px-6">
      <h2 class="text-3xl font-bold mb-10" data-aos="fade-up"><i class="fas fa-anchor text-yellow-500 mr-2"></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="fade-right">
          <i class="fas fa-user-tie text-4xl text-yellow-500 mb-4"></i>
          <h3 class="text-xl font-semibold mb-2">Guía local certificado</h3>
          <p class="text-gray-600">Aprende sobre el comportamiento de las ballenas y la historia marina de Loreto.</p>
        </div>
        <div class="bg-white rounded-xl shadow-lg p-8" data-aos="fade-up">
          <i class="fas fa-ship text-4xl text-yellow-500 mb-4"></i>
          <h3 class="text-xl font-semibold mb-2">Lancha segura y cómoda</h3>
          <p class="text-gray-600">Navegación con equipo de seguridad, techado y comunicación con la marina local.</p>
        </div>
        <div class="bg-white rounded-xl shadow-lg p-8" data-aos="fade-left">
          <i class="fas fa-camera text-4xl text-yellow-500 mb-4"></i>
          <h3 class="text-xl font-semibold mb-2">Fotografía y video</h3>
          <p class="text-gray-600">Captura cada momento con nuestro fotógrafo opcional especializado en vida marina.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 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="fas fa-comments text-yellow-500 mr-2"></i>Experiencias de viajeros</h2>
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-gray-50 rounded-xl p-6 shadow-md" data-aos="fade-right">
          <p class="italic text-gray-600">“Nunca olvidaré ver una ballena azul a solo unos metros del bote. El equipo fue amable y profesional.”</p>
          <h4 class="mt-4 font-semibold text-yellow-600"><i class="fas fa-user-circle mr-2"></i>Laura M.</h4>
        </div>
        <div class="bg-gray-50 rounded-xl p-6 shadow-md" data-aos="fade-left">
          <p class="italic text-gray-600">“Increíble experiencia natural. La organización fue perfecta y el respeto hacia los animales se nota.”</p>
          <h4 class="mt-4 font-semibold text-yellow-600"><i class="fas fa-user-circle mr-2"></i>Diego A.</h4>
        </div>
      </div>
    </div>
  </section>

  <!-- RESERVA -->
  <section id="reserva" class="py-20 bg-gray-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="fas fa-calendar-alt text-yellow-400 mr-2"></i>Reserva tu Tour de Ballenas</h2>
      <p class="text-gray-300 mb-8">Temporada activa: <span class="text-yellow-400 font-semibold" id="temporada"></span></p>

      <form id="formTour" class="grid md:grid-cols-2 gap-6 text-left">
        <input type="text" id="nombre" placeholder="Tu nombre" class="p-3 rounded-md w-full text-gray-800" required>
        <input type="email" id="correo" placeholder="Tu correo" class="p-3 rounded-md w-full text-gray-800" required>
        <textarea id="mensaje" placeholder="Mensaje o fecha preferida" class="p-3 rounded-md w-full md:col-span-2 text-gray-800"></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 mr-2"></i> Enviar Solicitud por WhatsApp
        </button>
      </form>
      <p id="msg" class="hidden mt-4 text-green-400 font-semibold"><i class="fas fa-check-circle mr-2"></i> ¡Solicitud enviada!</p>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="bg-gray-950 text-gray-400 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-400 hover:text-yellow-300 ml-2"><i class="fab fa-instagram"></i></a>
      <a href="#" class="text-yellow-400 hover:text-yellow-300 ml-2"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-yellow-400 hover:text-yellow-300 ml-2"><i class="fab fa-tiktok"></i></a>
    </p>
  </footer>

  <!-- BOTÓN WHATSAPP FLOTANTE -->
  <a href="https://wa.me/5216121234567?text=¡Hola!%20Quiero%20reservar%20el%20tour%20de%20avistamiento%20de%20ballenas%20en%20Loreto" 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 animate-bounce">
    <i class="fab fa-whatsapp"></i>
  </a>
    <script>
    AOS.init({ duration: 800, once: true });

    // Temporada automática
    const mes = new Date().getMonth() + 1;
    document.getElementById("temporada").textContent =
      (mes >= 1 && mes <= 3) ? "Activa (Enero - Marzo)" : "Fuera de temporada";

    // WhatsApp link dinámico
    document.getElementById("formTour").addEventListener("submit", e => {
      e.preventDefault();
      const nombre = document.getElementById("nombre").value;
      const mensaje = document.getElementById("mensaje").value;
      const url = `https://wa.me/5216121234567?text=Hola!%20Soy%20${nombre}.%20Quiero%20más%20información%20sobre%20el%20Tour%20de%20Ballenas%20Azules.%20${mensaje}`;
      window.open(url, "_blank");
      document.getElementById("msg").classList.remove("hidden");
      e.target.reset();
    });
  </script>
  
</body>
HTML Editor

CSS Editor

JS Editor

HTML Editor

CSS Editor

JS Editor

Gestión de Landing
