Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM

HTML Editor

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

  <!-- ======== NAVBAR ======== -->
<nav class="navbar">
  <div class="nav-container text-white">
    <a href="/home" class="nav-logo"><img src="https://oficinavirtualmx.com/imagenes/logoxxx.png" width="200px"></a>&ensp; &ensp; &ensp;     

    <div class="nav-toggle" id="nav-toggle">
      <span></span>
      <span></span>
      <span></span>  
    </div>

    <ul class="nav-menu" id="nav-menu">
      <li><a href="#servicios" class="nav-link">Servicios</a></li>
      <li><a href="#testimonios" class="nav-link">Testimonios</a></li>
      <li><a href="#reserva" class="nav-link">Contacto</a></li>
    </ul>
  </div>
</nav>

 <!-- ======== HERO CON VIDEO ======== -->
<section class="hero" id="inicio">  
  <video poster="https://oficinavirtualmx.com/imagenes/web.png" autoplay muted loop playsinline class="absolute w-full h-full object-cover">
      <source src="https://web.oficinavirtualmx.com/videos/mx.mp4" type="video/mp4" /> 
    </video>
  <div class="hero-overlay"></div>

  <div class="hero-content">
    <h1>Servicios de Diseño Web</h1>
    <p>Transforma tu visión en una experiencia digital inolvidable</p>
    <a href="#reserva">Me Interesa</a>
    <div id="servicios"></div>
  </div>
</section> 
  <!-- TOURS -->
  <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-10">Nuestros Servicios</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://web.oficinavirtualmx.com/imagenes/webdsign.png" class="w-full h-56 object-cover" alt="Islas Loreto">
          <div class="p-6 text-left">
            <h3 class="text-xl font-bold mb-2">Diseño de Sitios Web Personalizados</h3>
            <p class="text-gray-600 mb-4">
              Creamos sitios web únicos y a medida que reflejan la identidad de tu marca. Desde el diseño visual hasta la funcionalidad, cada detalle se adapta a tus necesidades específicas. Perfecto para negocios que buscan destacar con una presencia en línea profesional y original.
<br><br>
              <strong>Características:</strong>
<br>
Diseño responsive para todos los dispositivos (móviles, tabletas y computadoras).
<br>
Optimización SEO básica para mejorar tu visibilidad en buscadores.
<br>
Integración con herramientas de análisis como Google Analytics.
<br>
Entrega en 2-4 semanas, con revisiones ilimitadas durante el proceso.
<br><br>
              <strong>Ideal para:</strong> <br>Empresas, startups o profesionales que desean un sitio web único y funcional.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$3,890 MXN</span>
              <a href="#reserva" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Me Interesa</a>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:-translate-y-1 transition">
          <img src="https://web.oficinavirtualmx.com/imagenes/ecommerce.png" 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">Creación de Tiendas en Línea (E-commerce)</h3>
            <p class="text-gray-600 mb-4">
              Desarrollamos tiendas en línea robustas y fáciles de usar para que puedas vender tus productos o servicios desde el primer día. Nos especializamos en plataformas como Shopify o WooCommerce, asegurando una experiencia de compra fluida para tus clientes.
<br><br>
              <strong>Características:</strong>
<br>
Diseño atractivo y optimizado para conversiones.
<br>
Integración de pasarelas de pago seguras (PayPal, Stripe, etc.).
<br>
Gestión sencilla de productos y pedidos desde un panel de control.
<br>
Soporte técnico inicial para que aprendas a administrar tu tienda.
<br><br>
              <strong>Ideal para:</strong> <br>Emprendedores y negocios que buscan expandir sus ventas al mundo digital.</p>
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$4,800 MXN</span>
              <a href="#reserva" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Me Interesa</a>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden hover:-translate-y-1 transition">
          <img src="https://web.oficinavirtualmx.com/imagenes/optin.png" 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">Rediseño y Optimización de Sitios Web</h3>
            <p class="text-gray-600 mb-4">
              Actualizamos y mejoramos sitios web existentes para que sean modernos, rápidos y efectivos. Si tu sitio está desactualizado o no genera resultados, lo transformamos con un diseño fresco y optimizaciones técnicas.
<br><br>
              <strong>Características:</strong> 
<br>
Auditoría completa de tu sitio actual (rendimiento, SEO y usabilidad).
<br>
Mejoras en velocidad de carga y experiencia del usuario (UX).
<br>
Actualización de contenido visual y textual.
<br>
Mantenimiento opcional para actualizaciones continuas.
<br><br>
              <strong>Ideal para:</strong> <br>Negocios con sitios web antiguos que necesitan una renovación para competir en el mercado actual.</p> 
            <div class="flex justify-between items-center">
              <span class="text-yellow-600 font-semibold">$1,980 MXN</span>
              <a href="#reserva" class="bg-yellow-500 text-white py-2 px-4 rounded-full hover:bg-yellow-600 transition">Me Interesa</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="testimonios"></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 clientes</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. Innovación, rapidez y comunicación. ¡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">“Muy facíl de trabajar con ellos, su forma de trabajar tiene precio.”</p>
          <h4 class="mt-4 font-semibold text-yellow-600">— Jorge R.</h4>
        </div>
      </div>
    </div>
    <div id="reserva"></div> 
  </section>

  <!-- RESERVA --> 
  <section 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">Contrata Tu Servicio</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="Servicio 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 Oficina Virtual Mx. 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/526131148964?text=¡Hola!%20Quiero%20contratar%20un%20Servicio%20de%20OficinaVirtualMx" 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>

CSS Editor

/* ======== RESETEO BÁSICO ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======== HERO CON VIDEO ======== */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 26, 47, 0.55); /* Oscurece ligeramente el video */
  z-index: 1;
}

/* ======== NAVBAR ======== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  background: rgba(10, 26, 47, 0.6);
  backdrop-filter: blur(8px);
  transition: background 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.nav-logo {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
}

/* ======== MENU LINKS ======== */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-menu li a:hover {
  color: #00c6ff;
}

/* ======== TOGGLE (MOBILE) ======== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* ======== MOBILE STYLES ======== */
@media (max-width: 768px) {
  .nav-menu {
    position: absolute;
    top: 70px;
    right: 0;
    background: rgba(10, 26, 47, 0.95);
    width: 200px;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    display: none;
    border-radius: 0 0 0 10px;
  }

  .nav-menu.show {
    display: flex;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .nav-toggle {
    display: flex;
  }

  /* animación del ícono hamburguesa */
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
  }
}

/* ======== HERO CONTENIDO ======== */
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 2rem;
}

.hero-content a {
  background: #00c6ff;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.hero-content a:hover {
  background: #008dd1;
}

HTML Editor

CSS Editor

JS Editor

Gestión de Landing