agentsclimarketplace
Sign in

Componentes landing

Skill magallon/website-audit-toolkit/componentes-landing

Patrones de componentes HTML + Tailwind CSS reutilizables para landing pages. Usa este skill cuando necesites construir secciones de landing como hero, navbar, pricing, FAQ, footer, problema/solución, timeline o prueba social. Todos los componentes son HTML semántico puro con Tailwind, sin React ni frameworks.From its SKILL.md

Install
npx -y skills add magallon/website-audit-toolkit --skill componentes-landing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

18.1 KB, ~5.4k tokens by cl100k_base, as published. Nobody here has run it

Skill: Componentes Landing (HTML + Tailwind)

Reglas de Uso

  • Todos los componentes usan HTML semántico + Tailwind CSS.
  • Sin React. Sin componentes JS. HTML puro.
  • La interactividad (acordeón, menú, scroll) se maneja en app.js usando los patrones del skill animaciones-gsap.
  • Los colores, tipografías e imágenes se adaptan según la Workspace Rule activa.
  • Los textos de ejemplo son placeholders descriptivos. Reemplázalos con copy real del brief del cliente.

Componente 1: Navbar Píldora Flotante

<nav class="navbar fixed top-4 left-1/2 -translate-x-1/2 z-50 px-6 py-3 rounded-full flex items-center justify-between gap-8 max-w-4xl w-[90%]">

  <!-- Logo -->
  <a href="#" class="font-bold text-lg tracking-tight">[Marca]</a>

  <!-- Links desktop -->
  <div class="hidden md:flex items-center gap-6 text-sm font-medium">
    <a href="#servicios" class="hover:opacity-70 transition-opacity">Servicios</a>
    <a href="#proceso" class="hover:opacity-70 transition-opacity">Proceso</a>
    <a href="#precios" class="hover:opacity-70 transition-opacity">Precios</a>
    <a href="#contacto" class="btn-cta px-5 py-2 rounded-full text-sm font-semibold">[CTA]</a>
  </div>

  <!-- Hamburger móvil -->
  <button class="menu-toggle md:hidden flex flex-col gap-1.5 p-2" aria-label="Abrir menú">
    <span class="block w-6 h-0.5 bg-current transition-all"></span>
    <span class="block w-6 h-0.5 bg-current transition-all"></span>
    <span class="block w-4 h-0.5 bg-current transition-all"></span>
  </button>
</nav>

<!-- Menú móvil fullscreen -->
<div class="mobile-menu fixed inset-0 z-[999] flex flex-col items-center justify-center gap-8 text-2xl font-semibold">
  <a href="#servicios">Servicios</a>
  <a href="#proceso">Proceso</a>
  <a href="#precios">Precios</a>
  <a href="#contacto" class="btn-cta px-8 py-3 rounded-full text-lg">[CTA]</a>
</div>

Componente 2: Hero Full-screen

<section class="relative min-h-screen flex items-end pb-20 md:pb-32 overflow-hidden">

  <!-- Fondo con overlay -->
  <div class="absolute inset-0">
    <img src="assets/images/hero.jpg" alt="[Descripción de la imagen]"
         class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
  </div>

  <!-- Contenido -->
  <div class="relative z-10 max-w-6xl mx-auto px-6 w-full">

    <!-- Badge de autoridad -->
    <div class="hero-animate inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/80 text-sm mb-6">
      <span class="pulse-dot"></span>
      [+147 proyectos entregados]
    </div>

    <!-- Titular -->
    <h1 class="hero-animate text-4xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.1] max-w-3xl mb-6">
      [Titular principal]
      <em class="font-serif italic font-normal">[palabra clave]</em>
    </h1>

    <!-- Subtítulo -->
    <p class="hero-animate text-lg md:text-xl text-white/70 max-w-xl mb-8">
      [Subtítulo descriptivo en 1-2 líneas]
    </p>

    <!-- CTAs -->
    <div class="hero-animate flex flex-wrap gap-4">
      <a href="#contacto" class="btn-cta px-8 py-4 rounded-full font-semibold text-base">
        [CTA Principal]
      </a>
      <a href="#proceso" class="px-8 py-4 rounded-full font-semibold text-base text-white border border-white/30 hover:bg-white/10 transition-colors">
        Conoce el proceso →
      </a>
    </div>
  </div>
</section>

Componente 3: Problema → Solución (Doble columna)

<section class="py-20 md:py-32 px-6">
  <div class="max-w-6xl mx-auto">

    <div class="grid md:grid-cols-2 gap-12 md:gap-20">

      <!-- Problema -->
      <div class="animate-from-left">
        <span class="text-sm font-mono uppercase tracking-widest opacity-50 mb-4 block">El problema</span>
        <h2 class="text-3xl md:text-4xl font-bold mb-8">[Titular del problema]</h2>
        <ul class="space-y-4">
          <li class="flex items-start gap-3">
            <span class="mt-1.5 w-2 h-2 rounded-full bg-red-400 flex-shrink-0"></span>
            <span class="text-lg opacity-80">[Punto de dolor 1]</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1.5 w-2 h-2 rounded-full bg-red-400 flex-shrink-0"></span>
            <span class="text-lg opacity-80">[Punto de dolor 2]</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1.5 w-2 h-2 rounded-full bg-red-400 flex-shrink-0"></span>
            <span class="text-lg opacity-80">[Punto de dolor 3]</span>
          </li>
        </ul>
      </div>

      <!-- Solución -->
      <div class="animate-from-right">
        <span class="text-sm font-mono uppercase tracking-widest opacity-50 mb-4 block">La solución</span>
        <h2 class="text-3xl md:text-4xl font-bold mb-8">[Titular de la solución]</h2>
        <ul class="space-y-4">
          <li class="flex items-start gap-3">
            <span class="mt-1.5 w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></span>
            <span class="text-lg opacity-80">[Beneficio 1]</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1.5 w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></span>
            <span class="text-lg opacity-80">[Beneficio 2]</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="mt-1.5 w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></span>
            <span class="text-lg opacity-80">[Beneficio 3]</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Componente 4: Timeline (Cómo funciona - 3 pasos)

<section class="py-20 md:py-32 px-6">
  <div class="max-w-4xl mx-auto">

    <div class="text-center mb-16 animate-on-scroll">
      <span class="text-sm font-mono uppercase tracking-widest opacity-50 mb-4 block">Proceso</span>
      <h2 class="text-3xl md:text-4xl font-bold">[Cómo funciona]</h2>
    </div>

    <div class="animate-stagger-group space-y-12 md:space-y-0 md:grid md:grid-cols-3 md:gap-12">

      <!-- Paso 1 -->
      <div class="stagger-item relative">
        <span class="text-6xl font-bold opacity-10 absolute -top-4 -left-2">01</span>
        <div class="relative pt-8">
          <h3 class="text-xl font-bold mb-3">[Título paso 1]</h3>
          <p class="opacity-70 leading-relaxed">[Descripción breve del primer paso]</p>
        </div>
      </div>

      <!-- Paso 2 -->
      <div class="stagger-item relative">
        <span class="text-6xl font-bold opacity-10 absolute -top-4 -left-2">02</span>
        <div class="relative pt-8">
          <h3 class="text-xl font-bold mb-3">[Título paso 2]</h3>
          <p class="opacity-70 leading-relaxed">[Descripción breve del segundo paso]</p>
        </div>
      </div>

      <!-- Paso 3 -->
      <div class="stagger-item relative">
        <span class="text-6xl font-bold opacity-10 absolute -top-4 -left-2">03</span>
        <div class="relative pt-8">
          <h3 class="text-xl font-bold mb-3">[Título paso 3]</h3>
          <p class="opacity-70 leading-relaxed">[Descripción breve del tercer paso]</p>
        </div>
      </div>
    </div>
  </div>
</section>

Componente 5: Prueba Social (Resultados / Testimonios)

<section class="py-20 md:py-32 px-6">
  <div class="max-w-6xl mx-auto">

    <div class="text-center mb-16 animate-on-scroll">
      <span class="text-sm font-mono uppercase tracking-widest opacity-50 mb-4 block">Resultados</span>
      <h2 class="text-3xl md:text-4xl font-bold">[Titular de evidencia]</h2>
    </div>

    <div class="animate-stagger-group grid md:grid-cols-3 gap-8">

      <!-- Testimonio / caso -->
      <div class="stagger-item p-8 rounded-3xl border border-black/5 bg-white/50">
        <div class="flex items-center gap-1 mb-4 text-yellow-500 text-sm">★★★★★</div>
        <p class="text-lg mb-6 leading-relaxed opacity-80">"[Testimonio específico con resultado concreto]"</p>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-gray-200 flex-shrink-0"></div>
          <div>
            <p class="font-semibold text-sm">[Nombre]</p>
            <p class="text-xs opacity-50">[Cargo, Empresa]</p>
          </div>
        </div>
      </div>

      <!-- Repite para cada testimonio -->

    </div>
  </div>
</section>

Componente 6: Pricing (3 planes)

<section id="precios" class="py-20 md:py-32 px-6">
  <div class="max-w-5xl mx-auto">

    <div class="text-center mb-16 animate-on-scroll">
      <span class="text-sm font-mono uppercase tracking-widest opacity-50 mb-4 block">Precios</span>
      <h2 class="text-3xl md:text-4xl font-bold">[Elige tu plan]</h2>
    </div>

    <div class="animate-stagger-group grid md:grid-cols-3 gap-6 items-start">

      <!-- Plan básico -->
      <div class="stagger-item p-8 rounded-3xl border border-black/10">
        <h3 class="text-lg font-bold mb-2">[Plan Básico]</h3>
        <p class="text-sm opacity-60 mb-6">[Descripción corta]</p>
        <div class="text-4xl font-bold mb-6">$[precio]<span class="text-base font-normal opacity-50">/mes</span></div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 1]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 2]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 3]
          </li>
        </ul>
        <a href="#" class="block text-center py-3 rounded-full border border-current font-semibold hover:opacity-80 transition-opacity">[CTA]</a>
      </div>

      <!-- Plan destacado (medio) -->
      <div class="stagger-item p-8 rounded-3xl relative scale-105 shadow-xl"
           style="background-color: var(--color-primary); color: white;">
        <span class="absolute -top-3 left-1/2 -translate-x-1/2 text-xs font-bold px-4 py-1 rounded-full"
              style="background-color: var(--color-accent);">POPULAR</span>
        <h3 class="text-lg font-bold mb-2">[Plan Pro]</h3>
        <p class="text-sm opacity-70 mb-6">[Descripción corta]</p>
        <div class="text-4xl font-bold mb-6">$[precio]<span class="text-base font-normal opacity-50">/mes</span></div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 1]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 2]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 3]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 4]
          </li>
        </ul>
        <a href="#" class="block text-center py-3 rounded-full font-semibold transition-opacity hover:opacity-90"
           style="background-color: var(--color-accent);">[CTA]</a>
      </div>

      <!-- Plan enterprise -->
      <div class="stagger-item p-8 rounded-3xl border border-black/10">
        <h3 class="text-lg font-bold mb-2">[Plan Enterprise]</h3>
        <p class="text-sm opacity-60 mb-6">[Descripción corta]</p>
        <div class="text-4xl font-bold mb-6">$[precio]<span class="text-base font-normal opacity-50">/mes</span></div>
        <ul class="space-y-3 mb-8">
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 1]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature 2]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Todo del plan Pro]
          </li>
          <li class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            [Feature exclusivo]
          </li>
        </ul>
        <a href="#" class="block text-center py-3 rounded-full border border-current font-semibold hover:opacity-80 transition-opacity">[CTA]</a>
      </div>
    </div>
  </div>
</section>

Componente 7: FAQ Acordeón

<section class="py-20 md:py-32 px-6">
  <div class="max-w-3xl mx-auto">

    <div class="text-center mb-16 animate-on-scroll">
      <span class="text-sm font-mono uppercase tracking-widest opacity-50 mb-4 block">FAQ</span>
      <h2 class="text-3xl md:text-4xl font-bold">[Preguntas frecuentes]</h2>
    </div>

    <div class="space-y-4">
      <!-- Pregunta 1 -->
      <div class="accordion-item border border-black/10 rounded-2xl overflow-hidden">
        <button class="accordion-trigger w-full flex items-center justify-between p-6 text-left font-semibold text-lg">
          [¿Pregunta específica del negocio?]
          <span class="accordion-icon text-2xl font-light flex-shrink-0 ml-4">+</span>
        </button>
        <div class="accordion-content px-6 pb-6">
          <p class="opacity-70 leading-relaxed">[Respuesta concisa en 2-3 líneas máximo]</p>
        </div>
      </div>

      <!-- Repite para cada pregunta (4 total recomendado) -->
    </div>
  </div>
</section>

Componente 8: Cierre (CTA final)

<section class="py-20 md:py-32 px-6">
  <div class="max-w-3xl mx-auto text-center animate-on-scroll">

    <h2 class="text-3xl md:text-5xl font-bold mb-6">[Titular de cierre con urgencia o beneficio]</h2>
    <p class="text-lg opacity-70 mb-10 max-w-xl mx-auto">[Subtítulo que refuerza la propuesta de valor]</p>

    <div class="flex flex-wrap justify-center gap-4 mb-6">
      <a href="#contacto" class="btn-cta px-10 py-4 rounded-full font-semibold text-lg">[CTA Principal]</a>
    </div>

    <p class="text-sm opacity-40">[Microcopy: "Tarda 30 segundos · Sin compromiso · Respuesta en 24h"]</p>
  </div>
</section>

Componente 9: Footer Premium

<footer class="rounded-t-[3rem] px-6 pt-16 pb-8" style="background-color: var(--color-dark);">
  <div class="max-w-6xl mx-auto">

    <!-- Grid principal -->
    <div class="grid md:grid-cols-4 gap-12 mb-16">

      <!-- Marca -->
      <div class="md:col-span-1">
        <h3 class="text-xl font-bold text-white mb-4">[Marca]</h3>
        <p class="text-sm text-white/50 leading-relaxed">[Descripción breve de la marca en 2 líneas]</p>
      </div>

      <!-- Links -->
      <div>
        <h4 class="text-sm font-semibold text-white/70 uppercase tracking-wider mb-4">Servicios</h4>
        <ul class="space-y-2">
          <li><a href="#" class="text-sm text-white/50 hover:text-white transition-colors">[Servicio 1]</a></li>
          <li><a href="#" class="text-sm text-white/50 hover:text-white transition-colors">[Servicio 2]</a></li>
          <li><a href="#" class="text-sm text-white/50 hover:text-white transition-colors">[Servicio 3]</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-sm font-semibold text-white/70 uppercase tracking-wider mb-4">Empresa</h4>
        <ul class="space-y-2">
          <li><a href="#" class="text-sm text-white/50 hover:text-white transition-colors">Nosotros</a></li>
          <li><a href="#" class="text-sm text-white/50 hover:text-white transition-colors">Proceso</a></li>
          <li><a href="#" class="text-sm text-white/50 hover:text-white transition-colors">Contacto</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-sm font-semibold text-white/70 uppercase tracking-wider mb-4">Contacto</h4>
        <ul class="space-y-2">
          <li class="text-sm text-white/50">[[email protected]]</li>
          <li class="text-sm text-white/50">[+52 000 000 0000]</li>
          <li class="text-sm text-white/50">[Ciudad, Estado]</li>
        </ul>
      </div>
    </div>

    <!-- Línea inferior -->
    <div class="border-t border-white/10 pt-8 flex flex-wrap items-center justify-between gap-4">
      <p class="text-xs text-white/30">© 2026 [Marca]. Todos los derechos reservados.</p>
      <div class="flex items-center gap-2 text-xs text-white/30">
        <span class="pulse-dot"></span>
        <span>Sistema operativo · Activo</span>
      </div>
    </div>
  </div>
</footer>

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 625,605. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.