Componentes landing

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

Pre-production audit protocol for static websites — 10 sequential skills covering performance, accessibility, SEO, security, and more

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.

What its author says it does

Copied from the file, not written here

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.

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>