Astro Hero

Componente Hero creado con Astro. Solo funciona en proyectos Astro. Se instala en components/enlolab/.

Bloque NPM: astro

registry/blocks/astro-hero/hero.astro

---
interface Props {
  title?: string;
  description?: string;
}

const { title = "Bienvenido a ENLOLAB", description = "Componente Hero creado con Astro" } = Astro.props;
---

<section class="hero-section">
  <div class="container">
    <h1 class="hero-title">{title}</h1>
    <p class="hero-description">{description}</p>
    <slot />
  </div>
</section>

<style>
  .hero-section {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
  }

  .container {
    max-width: 800px;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  .hero-description {
    font-size: 1.25rem;
    opacity: 0.9;
  }
</style>

Instalación

Para instalar este componente, primero configura el registry en tu components.json:

{
  "registries": {
    "@enlolab": {
      "url": "https://ui.enlolab.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

Luego instala el componente:

npx shadcn@latest add @enlolab/astro-hero