Hero

/* Componente: Hero */
/* Categoría: layout · Librería: shadcn · 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 shadcn-hero */

/* shadcn/ui: Badge + Button; pasa data-* como props. */
/* 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 data-component="hero" class="rounded-xl border bg-card px-7 py-14 text-center text-card-foreground shadow-sm">
  <span data-slot="badge" class="inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium">Nuevo · Component Hub</span>
  <h1 class="mx-auto mt-4 mb-4 max-w-[16ch] text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl" data-context="hero-title">Componentes nativos para agentes de IA</h1>
  <p class="mx-auto mb-7 max-w-[56ch] text-lg text-muted-foreground" 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="flex flex-wrap justify-center gap-3">
    <a data-slot="button" data-tool="startNow" href="#empezar" class="inline-flex h-10 items-center justify-center rounded-md bg-primary px-6 text-sm font-medium text-primary-foreground shadow-sm hover:opacity-90">Empezar ahora</a>
    <button data-slot="button" data-variant="outline" data-tool="watchDemo" type="button" class="inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-6 text-sm font-medium shadow-sm hover:bg-accent">▶ Ver demo</button>
  </div>
</section>

<section data-component="hero" className="rounded-xl border bg-card px-7 py-14 text-center">
  <Badge variant="outline">Nuevo · Component Hub</Badge>
  <h1 className="mx-auto mt-4 max-w-[16ch] text-5xl font-extrabold" data-context="hero-title">…</h1>
  <p className="mx-auto my-6 max-w-[56ch] text-lg text-muted-foreground" data-context="hero-subtitle">…</p>
  <div className="flex justify-center gap-3">
    <Button size="lg" asChild data-tool="startNow"><a href="/empezar">Empezar ahora</a></Button>
    <Button size="lg" variant="outline" data-tool="watchDemo" onClick={openDemo}>▶ Ver demo</Button>
  </div>
</section>

{
  "id": "shadcn-hero",
  "name": "Hero",
  "category": "layout",
  "library": "shadcn",
  "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",
    "shadcn"
  ],
  "controls": [
    {
      "variable": "--primary",
      "label": "Color primario",
      "type": "color",
      "default": "#18181b"
    },
    {
      "variable": "--primary-foreground",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#fafafa"
    },
    {
      "variable": "--radius",
      "label": "Radio",
      "type": "range",
      "default": "0.625rem",
      "min": 0,
      "max": 1.5,
      "step": 0.125,
      "unit": "rem"
    }
  ],
  "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": [
    "core-hero",
    "tailwind-hero",
    "bootstrap-hero",
    "mui-hero"
  ],
  "usage": {
    "framework": "react",
    "code": "<section data-component=\"hero\" className=\"rounded-xl border bg-card px-7 py-14 text-center\">\n  <Badge variant=\"outline\">Nuevo · Component Hub</Badge>\n  <h1 className=\"mx-auto mt-4 max-w-[16ch] text-5xl font-extrabold\" data-context=\"hero-title\">…</h1>\n  <p className=\"mx-auto my-6 max-w-[56ch] text-lg text-muted-foreground\" data-context=\"hero-subtitle\">…</p>\n  <div className=\"flex justify-center gap-3\">\n    <Button size=\"lg\" asChild data-tool=\"startNow\"><a href=\"/empezar\">Empezar ahora</a></Button>\n    <Button size=\"lg\" variant=\"outline\" data-tool=\"watchDemo\" onClick={openDemo}>▶ Ver demo</Button>\n  </div>\n</section>"
  },
  "preview": "preview.css",
  "css": "hero.webmcp.css",
  "html": "hero.html"
}