Tarjetas

Card de servicio

Ideal para destacar un plan o proyecto. Incluye tags y CTA.

Listo para copiar

Plan Web Profesional

Sitio Corporativo Completo

Hasta 5 secciones, dominio .com, SSL, hosting NVMe y SEO técnico listo.

Hosting NVMe SSL SEO Técnico

Consultar precio

Código para copiar

<div class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-2xl p-6 shadow-xl">
  <div class="text-sm font-semibold uppercase tracking-wide mb-2">Plan Web Profesional</div>
  <h3 class="text-2xl font-bold mb-3">Sitio Corporativo Completo</h3>
  <p class="text-white/90 mb-4">Hasta 5 secciones, dominio .com, SSL, hosting NVMe y SEO t&eacute;cnico listo.</p>
  <div class="flex flex-wrap gap-2 mb-4">
    <span class="px-3 py-1 rounded-full bg-white/15 text-white text-xs">Hosting NVMe</span>
    <span class="px-3 py-1 rounded-full bg-white/15 text-white text-xs">SSL</span>
    <span class="px-3 py-1 rounded-full bg-white/15 text-white text-xs">SEO T&eacute;cnico</span>
  </div>
  <a href="#" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-purple-700 font-semibold rounded-full shadow hover:shadow-lg transition">Consultar precio</a>
</div>

Listas

Lista de beneficios

Usada en planes y proyectos para enumerar lo que incluye cada paquete.

Listo para copiar

✓

Dominio .com incluido

Primer año cubierto en todos los planes profesionales.
✓

SSL y hosting NVMe

Rendimiento alto y seguridad desde el día uno.
✓

Soporte prioritario

Respuestas rápidas por WhatsApp y correo.

Código para copiar

<ul class="bg-gray-900 text-gray-100 rounded-2xl p-5 space-y-3 shadow-lg">
  <li class="flex items-start gap-3">
    <span class="text-green-400">✓</span>
    <div>
      <p class="font-semibold">Dominio .com incluido</p>
      <p class="text-gray-400 text-sm">Primer año cubierto en todos los planes profesionales.</p>
    </div>
  </li>
  <li class="flex items-start gap-3">
    <span class="text-green-400">✓</span>
    <div>
      <p class="font-semibold">SSL y hosting NVMe</p>
      <p class="text-gray-400 text-sm">Rendimiento alto y seguridad desde el día uno.</p>
    </div>
  </li>
  <li class="flex items-start gap-3">
    <span class="text-green-400">✓</span>
    <div>
      <p class="font-semibold">Soporte prioritario</p>
      <p class="text-gray-400 text-sm">Respuestas rápidas por WhatsApp y correo.</p>
    </div>
  </li>
</ul>

CTA Contacto

Listo para cerrar la venta

Barra rápida con botones de email y WhatsApp, usada en varias landings.

Listo para copiar

¿Listo para avanzar?

Hablemos hoy y agenda tu demo

Email WhatsApp

Código para copiar

<div class="bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-2xl p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 shadow-lg">
  <div>
    <p class="text-sm font-semibold">¿Listo para avanzar?</p>
    <h3 class="text-xl font-bold">Hablemos hoy y agenda tu demo</h3>
  </div>
  <div class="flex gap-2 flex-wrap">
    <a href="mailto:mctaggart.dev@gmail.com" class="px-4 py-2 bg-white text-emerald-700 font-semibold rounded-xl shadow hover:shadow-lg transition">Email</a>
    <a href="https://wa.me/50762049480" class="px-4 py-2 bg-emerald-800/30 text-white font-semibold rounded-xl border border-white/40 hover:bg-emerald-800/50 transition">WhatsApp</a>
  </div>
</div>

Etiqueta

Badge de precio

Útil para resaltar planes (Landing, Web Pro, E-commerce).

Listo para copiar

Landing Page

$250 / proyecto

Más vendido

Código para copiar

<div class="inline-flex items-center gap-3 px-4 py-3 rounded-2xl bg-orange-50 border border-orange-200 shadow-sm">
  <div>
    <p class="text-xs font-semibold text-orange-700 uppercase">Landing Page</p>
    <div class="text-2xl font-bold text-orange-700">$250 <span class="text-sm font-medium text-orange-500">/ proyecto</span></div>
  </div>
  <span class="px-3 py-1 rounded-full text-xs font-bold bg-orange-600 text-white">Más vendido</span>
</div>

FAQ

Acordeón de pregunta

Usado en secciones de dudas frecuentes de WebsPTY.

Listo para copiar

¿Cuánto tarda la entrega? +

Landing en 1-2 semanas, Web Profesional en 2-3 semanas, E-commerce en 3-4 semanas.

Código para copiar

<details class="bg-gray-900 text-gray-100 rounded-2xl p-5 shadow-lg group">
  <summary class="cursor-pointer text-lg font-semibold flex items-center justify-between">
    ¿Cuánto tarda la entrega?
    <span class="text-sm text-gray-400 group-open:hidden">+</span>
    <span class="text-sm text-gray-400 hidden group-open:inline">-</span>
  </summary>
  <p class="text-gray-300 mt-3 text-sm">Landing en 1-2 semanas, Web Profesional en 2-3 semanas, E-commerce en 3-4 semanas.</p>
</details>

Testimonios

Card de testimonio

Para mostrar opiniones y reseñas de clientes satisfechos.

Listo para copiar

CM

Carlos Martínez

CEO, Restaurante El Buen Sabor

★ ★ ★ ★ ★

"WebsPTY nos entregó una landing perfecta en tiempo récord. Las reservas aumentaron un 40% el primer mes."

Código para copiar

<div class="bg-white border-2 border-gray-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition">
  <div class="flex items-center gap-4 mb-4">
    <div class="w-14 h-14 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-white text-xl font-bold">CM</div>
    <div>
      <p class="font-bold text-gray-900">Carlos Martínez</p>
      <p class="text-sm text-gray-500">CEO, Restaurante El Buen Sabor</p>
    </div>
  </div>
  <div class="flex gap-1 mb-3">
    <span class="text-yellow-400">★</span>
    <span class="text-yellow-400">★</span>
    <span class="text-yellow-400">★</span>
    <span class="text-yellow-400">★</span>
    <span class="text-yellow-400">★</span>
  </div>
  <p class="text-gray-700">"WebsPTY nos entregó una landing perfecta en tiempo récord. Las reservas aumentaron un 40% el primer mes."</p>
</div>

Formularios

Input de contacto

Campo de texto con etiqueta flotante y validación visual.

Listo para copiar

Nombre completo

Correo electrónico

Código para copiar

<div class="relative">
  <input type="text" id="nombre" placeholder=" " class="peer w-full px-4 pt-6 pb-2 border-2 border-gray-200 rounded-xl focus:border-teal-600 focus:outline-none transition" />
  <label for="nombre" class="absolute left-4 top-2 text-xs text-gray-500 peer-placeholder-shown:top-4 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:top-2 peer-focus:text-xs peer-focus:text-teal-600 transition-all">Nombre completo</label>
</div>

Alertas

Banner de notificación

Para mostrar avisos importantes o promociones temporales.

Listo para copiar

Oferta por tiempo limitado

15% de descuento en todos los planes hasta el 15 de febrero. ¡No dejes pasar esta oportunidad!

Código para copiar

<div class="bg-gradient-to-r from-red-50 to-orange-50 border-l-4 border-red-600 rounded-xl p-4 shadow-md">
  <div class="flex items-start gap-3">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <h3 class="font-bold text-red-900 mb-1">Oferta por tiempo limitado</h3>
      <p class="text-sm text-red-800">15% de descuento en todos los planes hasta el 15 de febrero. ¡No dejes pasar esta oportunidad!</p>
    </div>
  </div>
</div>

Stats

Tarjeta de estadística

Para destacar números clave como proyectos, clientes o años de experiencia.

Listo para copiar

50+

Proyectos

98%

Satisfacción

3+

Años

Código para copiar

<div class="bg-gradient-to-br from-cyan-500 to-blue-600 text-white rounded-2xl p-5 text-center shadow-lg">
  <div class="text-4xl font-black mb-1">50+</div>
  <div class="text-sm font-medium opacity-90">Proyectos</div>
</div>

Hero

Sección hero compacta

Bloque de apertura con título, descripción y CTA principal.

Listo para copiar

✨ Nuevo servicio disponible

Transforma tu negocio con una web profesional

Diseño moderno, hosting rápido y soporte dedicado. Todo incluido desde $250.

Ver planes Contactar

Código para copiar

<div class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 text-white rounded-2xl p-10 text-center shadow-2xl">
  <div class="inline-block px-3 py-1 bg-purple-500/20 border border-purple-400/30 rounded-full text-xs font-semibold mb-4">✨ Nuevo servicio disponible</div>
  <h1 class="text-4xl font-black mb-4 leading-tight">Transforma tu negocio con una web profesional</h1>
  <p class="text-white/80 mb-6 max-w-md mx-auto">Diseño moderno, hosting rápido y soporte dedicado. Todo incluido desde $250.</p>
  <div class="flex gap-3 justify-center flex-wrap">
    <a href="#" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-xl font-semibold shadow-lg transition">Ver planes</a>
    <a href="#" class="px-6 py-3 bg-white/10 hover:bg-white/20 border border-white/30 rounded-xl font-semibold transition">Contactar</a>
  </div>
</div>

Tabs

Pestañas navegables

Sistema de tabs CSS-only para organizar contenido sin JavaScript.

Listo para copiar

Todo lo que necesitas

✓ Diseño responsive
✓ Optimización SEO
✓ Hosting incluido

Código para copiar

<div class="flex gap-2 mb-4 border-b border-gray-200 pb-2">
  <button class="px-4 py-2 bg-emerald-600 text-white rounded-lg font-semibold text-sm shadow-md">Características</button>
  <button class="px-4 py-2 text-gray-600 hover:bg-gray-200 rounded-lg font-semibold text-sm transition">Precios</button>
</div>

Botones

Grupo de botones

Colección de estilos de botones primary, secondary y ghost.

Listo para copiar

Código para copiar

<button class="px-5 py-2.5 bg-violet-600 hover:bg-violet-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition">Primary</button>
<button class="px-5 py-2.5 bg-gray-200 hover:bg-gray-300 text-gray-900 font-semibold rounded-xl transition">Secondary</button>
<button class="px-5 py-2.5 border-2 border-violet-600 text-violet-600 hover:bg-violet-50 font-semibold rounded-xl transition">Outline</button>

Modales

Card modal compacta

Ventana flotante para confirmaciones o formularios rápidos.

Listo para copiar

¿Confirmar acción?

Esta acción no se puede deshacer. ¿Estás seguro de continuar?

Código para copiar

<div class="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full">
  <h3 class="text-xl font-bold text-gray-900 mb-2">¿Confirmar acción?</h3>
  <p class="text-gray-600 text-sm mb-4">Esta acción no se puede deshacer. ¿Estás seguro de continuar?</p>
  <div class="flex gap-3">
    <button class="flex-1 px-4 py-2 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-semibold rounded-lg transition">Confirmar</button>
    <button class="flex-1 px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-900 font-semibold rounded-lg transition">Cancelar</button>
  </div>
</div>

Footers

Footer minimalista

Pie de página simple con enlaces y copyright.

Listo para copiar

WebsPTY

Servicios Proyectos Contacto

Código para copiar

<footer class="bg-gray-900 text-gray-100 p-6">
  <div class="flex flex-wrap gap-6 justify-between items-center mb-4 pb-4 border-b border-gray-700">
    <div class="text-xl font-bold">WebsPTY</div>
    <div class="flex gap-4 text-sm">
      <a href="#" class="hover:text-lime-400 transition">Servicios</a>
      <a href="#" class="hover:text-lime-400 transition">Proyectos</a>
      <a href="#" class="hover:text-lime-400 transition">Contacto</a>
    </div>
  </div>
  <div class="text-center text-sm text-gray-400">© 2026 WebsPTY. Todos los derechos reservados.</div>
</footer>

Features

Grid de características

Cuadrícula 3x3 con íconos y descripciones cortas.

Listo para copiar

⚡

Rápido

🔒

Seguro

📱

Responsive

🎨

Moderno

🚀

Optimizado

💎

Premium

Código para copiar

<div class="grid grid-cols-3 gap-3">
  <div class="bg-gradient-to-br from-sky-50 to-blue-50 rounded-xl p-4 text-center border border-sky-100">
    <div class="text-2xl mb-2">⚡</div>
    <p class="text-xs font-semibold text-gray-900">Rápido</p>
  </div>
</div>

Navegación

Breadcrumbs

Migas de pan para indicar la ubicación actual en la jerarquía.

Listo para copiar

Código para copiar

<nav class="flex items-center gap-2 text-sm">
  <a href="#" class="text-gray-600 hover:text-rose-600 transition">Inicio</a>
  <span class="text-gray-400">/</span>
  <a href="#" class="text-gray-600 hover:text-rose-600 transition">Proyectos</a>
  <span class="text-gray-400">/</span>
  <span class="text-rose-600 font-semibold">Restaurante</span>
</nav>

Progreso

Barra de progreso

Indicador visual de completado o carga.

Listo para copiar

Desarrollo 75%

Testing 100%

Código para copiar

<div class="flex justify-between text-sm font-semibold mb-2">
  <span>Desarrollo</span>
  <span class="text-yellow-600">75%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
  <div class="bg-gradient-to-r from-yellow-500 to-orange-500 h-full rounded-full" style="width: 75%"></div>
</div>

Imágenes

Card con imagen

Tarjeta de proyecto o artículo con imagen destacada.

Listo para copiar

🍕

Restaurante

Pizzería Bella Italia

Landing page con sistema de pedidos online y menú interactivo.

Ver proyecto →

Código para copiar

<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition">
  <div class="h-40 bg-gradient-to-br from-slate-400 to-slate-600"></div>
  <div class="p-5">
    <div class="text-xs font-semibold text-slate-600 uppercase mb-1">Restaurante</div>
    <h3 class="text-lg font-bold text-gray-900 mb-2">Pizzería Bella Italia</h3>
    <p class="text-sm text-gray-600 mb-4">Landing page con sistema de pedidos online y menú interactivo.</p>
    <a href="#" class="inline-flex items-center text-sm font-semibold text-slate-600 hover:text-slate-800 transition">Ver proyecto →</a>
  </div>
</div>

Social

Botones sociales

Enlaces a redes sociales con iconos y hover effects.

Listo para copiar

f 📷 🐦 ▶ in

Código para copiar

<a href="#" class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-xl flex items-center justify-center text-xl shadow-md hover:shadow-lg transition">f</a>
<a href="#" class="w-12 h-12 bg-pink-600 hover:bg-pink-700 text-white rounded-xl flex items-center justify-center text-xl shadow-md hover:shadow-lg transition">📷</a>

Tipografía

Blockquote estilizado

Cita destacada con borde lateral y autor.

Listo para copiar

"El mejor momento para crear tu web fue hace un año. El segundo mejor momento es hoy."
— WebsPTY Team

Código para copiar

<blockquote class="border-l-4 border-zinc-600 pl-5 py-3 bg-zinc-50 rounded-r-xl">
  <p class="text-lg font-semibold text-gray-900 italic mb-2">"El mejor momento para crear tu web fue hace un año. El segundo mejor momento es hoy."</p>
  <cite class="text-sm text-gray-600 not-italic">— WebsPTY Team</cite>
</blockquote>

Calendarios

Selector de fecha

Input de fecha con ícono y estilo personalizado.

Listo para copiar

Fecha de entrega

📅

Código para copiar

<label class="block text-sm font-semibold text-gray-900 mb-1">Fecha de entrega</label>
<div class="relative">
  <input type="date" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-neutral-600 focus:outline-none transition" />
  <div class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">📅</div>
</div>

Fútbol

Lista de partidos

Bloque para mostrar resultados recientes con marcador y estado.

Listo para copiar

Liga Pro

Atlético Oeste vs Deportivo Norte

2 - 1

Finalizado

Copa

Racing City vs Unión Sur

1 - 1

En juego 67'

Código para copiar

<div class="flex items-center justify-between bg-gray-900 text-gray-100 rounded-2xl p-4">
  <div>
    <p class="text-xs uppercase text-gray-400">Liga Pro</p>
    <p class="font-semibold">Atlético Oeste vs Deportivo Norte</p>
  </div>
  <div class="text-right">
    <div class="text-2xl font-black">2 - 1</div>
    <span class="text-xs text-emerald-400">Finalizado</span>
  </div>
</div>

Fútbol

Tabla de posiciones

Ranking compacto con puntos y diferencia de goles.

Listo para copiar

Equipo PJ DG PTS

Tiburones FC 10 +12 25

Leones del Sur 10 +9 22

Rayo Norte 10 -1 15

Código para copiar

<div class="grid grid-cols-4 text-xs font-semibold uppercase bg-gray-100 text-gray-600 px-4 py-2">
  <span>Equipo</span>
  <span class="text-center">PJ</span>
  <span class="text-center">DG</span>
  <span class="text-right">PTS</span>
</div>
<div class="grid grid-cols-4 px-4 py-3 text-sm">
  <span class="font-semibold text-gray-900">Tiburones FC</span>
  <span class="text-center">10</span>
  <span class="text-center text-green-600">+12</span>
  <span class="text-right font-bold">25</span>
</div>

Fútbol

Lista de goleadores

Ranking de jugadores con avatar y goles anotados.

Listo para copiar

AC

Andrés Cruz

Tiburones FC

12

LS

Luis Sánchez

Leones del Sur

10

Código para copiar

<div class="flex items-center justify-between bg-gray-50 border border-gray-200 rounded-2xl p-4">
  <div class="flex items-center gap-3">
    <div class="w-10 h-10 rounded-full bg-lime-500 text-white flex items-center justify-center font-bold">AC</div>
    <div>
      <p class="font-semibold">Andrés Cruz</p>
      <p class="text-xs text-gray-500">Tiburones FC</p>
    </div>
  </div>
  <span class="text-xl font-black text-lime-700">12</span>
</div>

Pricing

Tabla de precios compacta

Tres planes alineados con CTA y beneficio destacado.

Listo para copiar

Starter

$250

Landing esencial

✓ 1 sección hero
✓ Formulario contacto
✓ SEO básico

Pro

$450

Web profesional

✓ 5 secciones
✓ Dominio + SSL
✓ Analytics

E-commerce

$750

Tienda online

✓ Catálogo productos
✓ Pagos online
✓ Soporte VIP

Código para copiar

<div class="border-2 border-blue-600 rounded-2xl p-4 shadow-lg bg-blue-50">
  <p class="text-xs font-semibold text-blue-700 uppercase">Pro</p>
  <div class="text-2xl font-black text-blue-700 mt-2">$450</div>
  <p class="text-xs text-blue-700/70 mb-4">Web profesional</p>
  <ul class="text-sm text-blue-900 space-y-2 mb-4">
    <li>✓ 5 secciones</li>
    <li>✓ Dominio + SSL</li>
    <li>✓ Analytics</li>
  </ul>
  <button class="w-full px-4 py-2 rounded-xl bg-blue-600 text-white font-semibold">Más vendido</button>
</div>

Timeline

Pasos del proyecto

Línea de tiempo para explicar el proceso de trabajo.

Listo para copiar

1

Briefing y objetivos

Reunión inicial para definir alcance y estilo.

2

Diseño UI

Prototipo con colores, tipografías y secciones.

3

Desarrollo y entrega

Implementación, SEO y publicación.

Código para copiar

<div class="flex gap-4">
  <div class="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">1</div>
  <div>
    <p class="font-semibold text-gray-900">Briefing y objetivos</p>
    <p class="text-sm text-gray-600">Reunión inicial para definir alcance y estilo.</p>
  </div>
</div>

Newsletter

Suscripción minimalista

Caja simple para captar correos con CTA claro.

Listo para copiar

Boletín WebsPTY

Recibe tips de diseño y ventas

Un correo semanal con ideas listas para aplicar.

Código para copiar

<div class="bg-teal-50 border border-teal-100 rounded-2xl p-6">
  <h3 class="text-2xl font-bold text-gray-900">Recibe tips de diseño y ventas</h3>
  <p class="text-sm text-gray-600">Un correo semanal con ideas listas para aplicar.</p>
  <div class="flex flex-col sm:flex-row gap-3 mt-4">
    <input type="email" placeholder="Tu correo" class="flex-1 px-4 py-3 rounded-xl border-2 border-teal-200 focus:border-teal-600 focus:outline-none" />
    <button class="px-5 py-3 rounded-xl bg-teal-600 text-white font-semibold">Suscribirme</button>
  </div>
</div>

Contacto

Formulario de contacto

Formulario completo con select y textarea, ideal para leads.

Listo para copiar

Código para copiar

<form class="bg-sky-50 border border-sky-100 rounded-2xl p-6 space-y-4">
  <div>
    <label class="text-sm font-semibold text-gray-700">Nombre</label>
    <input type="text" placeholder="Tu nombre" class="mt-2 w-full px-4 py-3 rounded-xl border-2 border-sky-100 focus:border-sky-600 focus:outline-none" />
  </div>
  <div>
    <label class="text-sm font-semibold text-gray-700">Correo</label>
    <input type="email" placeholder="correo@ejemplo.com" class="mt-2 w-full px-4 py-3 rounded-xl border-2 border-sky-100 focus:border-sky-600 focus:outline-none" />
  </div>
  <div>
    <label class="text-sm font-semibold text-gray-700">Servicio</label>
    <select class="mt-2 w-full px-4 py-3 rounded-xl border-2 border-sky-100 focus:border-sky-600 focus:outline-none">
      <option>Landing Page</option>
      <option>Web Profesional</option>
    </select>
  </div>
  <div>
    <label class="text-sm font-semibold text-gray-700">Mensaje</label>
    <textarea rows="4" class="mt-2 w-full px-4 py-3 rounded-xl border-2 border-sky-100 focus:border-sky-600 focus:outline-none"></textarea>
  </div>
  <button class="w-full px-5 py-3 rounded-xl bg-sky-600 text-white font-semibold">Enviar solicitud</button>
</form>

Contacto

Tarjeta de ubicación

Mapa simulado con horarios y CTA rápido.

Listo para copiar

📍

Oficina Central

Costa del Este, Panamá

Horario: Lunes a viernes, 9:00 a.m. - 6:00 p.m.

Tel: +507 6204-9480

Código para copiar

<div class="bg-amber-50 border border-amber-100 rounded-2xl p-6">
  <div class="h-40 rounded-xl bg-gradient-to-r from-amber-200 to-orange-200 flex items-center justify-center text-3xl">📍</div>
  <h3 class="text-lg font-bold text-gray-900">Oficina Central</h3>
  <p class="text-sm text-gray-600">Costa del Este, Panamá</p>
  <p class="text-sm text-gray-700"><strong>Horario:</strong> Lunes a viernes, 9:00 a.m. - 6:00 p.m.</p>
  <button class="px-4 py-2 rounded-xl bg-amber-600 text-white font-semibold">Cómo llegar</button>
</div>