Hero

/* Componente: Hero */
/* Categoría: layout · Librería: core · Versión: 1.0.0 */
/* Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título. */
/* Importar: npx webmcpcss components import core-hero */

.wm-hero { padding: 56px 28px; text-align: center; background: var(--wm-hero-bg, linear-gradient(160deg, #0f172a, #1e293b)); color: #fff; border-radius: var(--wm-radius, 18px); font-family: system-ui, sans-serif; }
.wm-hero__eyebrow { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; letter-spacing: .3px; }
.wm-hero__title { margin: 0 auto 14px; max-width: 16ch; font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -.5px; }
.wm-hero__subtitle { margin: 0 auto 28px; max-width: 56ch; color: rgba(255, 255, 255, .78); font-size: 17px; }
.wm-hero__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wm-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: calc(var(--wm-radius, 18px) - 8px); font: 600 15px/1 system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.wm-btn--primary { background: var(--wm-primary, #2563eb); color: var(--wm-on-primary, #fff); }
.wm-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }

/* Contrato WebMCP */
[data-component="hero"] [data-tool="startNow"] {
  webmcp-tool: "startNow";
  webmcp-description: "Llamada a la acción principal del hero: empieza el registro o la prueba";
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
}
[data-component="hero"] [data-tool="watchDemo"] {
  webmcp-tool: "watchDemo";
  webmcp-description: "Abre la demostración en vídeo";
  webmcp-intent: "action";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
}
[data-component="hero"] [data-context="hero-title"] { webmcp-context: "heroTitle"; webmcp-format: "text"; }
[data-component="hero"] [data-context="hero-subtitle"] { webmcp-context: "heroSubtitle"; webmcp-format: "text"; }

/* Animación de entrada del título (estándar de animaciones de WebMCPcss) */
[data-component="hero"] [data-context="hero-title"] {
  webmcp-animation: "heroTitleIn";
  webmcp-animation-type: keyframes;
  webmcp-animation-trigger: load;
  webmcp-animation-duration: 900ms;
  webmcp-animation-easing: cubic-bezier(.2, .8, .2, 1);
  webmcp-animation-keyframes: '[{"opacity":0,"transform":"translateY(18px)"},{"opacity":1,"transform":"none"}]';
}

<section class="wm-hero" data-component="hero">
  <p class="wm-hero__eyebrow">Nuevo · Component Hub</p>
  <h1 class="wm-hero__title" data-context="hero-title">Componentes nativos para agentes de IA</h1>
  <p class="wm-hero__subtitle" data-context="hero-subtitle">Botones, tarjetas y formularios que declaran qué puede hacer un agente, listos para Tailwind, Bootstrap, MUI y shadcn/ui.</p>
  <div class="wm-hero__actions">
    <a class="wm-btn wm-btn--primary" data-tool="startNow" href="#empezar">Empezar ahora</a>
    <button class="wm-btn wm-btn--ghost" data-tool="watchDemo" type="button">▶ Ver demo</button>
  </div>
</section>

{
  "id": "core-hero",
  "name": "Hero",
  "category": "layout",
  "library": "core",
  "version": "1.0.0",
  "description": "Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título.",
  "author": "WebMCPcss Team",
  "tags": [
    "layout",
    "hero",
    "landing",
    "cta",
    "core"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#2563eb"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "10px",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px"
    },
    {
      "variable": "--wm-surface",
      "label": "Fondo de la superficie",
      "type": "color",
      "default": "#ffffff"
    }
  ],
  "promptExamples": [
    "cambia el título del hero a “Componentes nativos para agentes”",
    "pon el botón Empezar ahora en verde"
  ],
  "animateExamples": [
    "aplica parallax al fondo del hero",
    "haz que el subtítulo aparezca con retardo"
  ],
  "related": [
    "tailwind-hero",
    "bootstrap-hero",
    "mui-hero",
    "shadcn-hero"
  ],
  "preview": "preview.css",
  "css": "hero.webmcp.css",
  "html": "hero.html"
}