Hero

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Hero
  eyebrow="eyebrow"
  title="Build faster with WRNexusJS"
  highlight="highlight"
  description="description"
  primaryLabel="Get started"
/>

Legacy mount name: data-component="Hero".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Hero.wrn

component Hero {
  props {
    class = ""
    eyebrow = ""
    title = "Build faster with WRNexusJS"
    highlight = ""
    description = ""
    primaryLabel = "Get started"
    primaryHref = "#"
    secondaryLabel = "Learn more"
    secondaryHref = "#"
    align = "center"
  }
  view {
        <section class="relative isolate overflow-hidden {class}">
        <div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(124,58,237,.18),transparent_45%)]">
        </div>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl {align === 'center' ? 'mx-auto text-center' : ''}">
        <Badge data-show="eyebrow" label="{eyebrow}" variant="brand" />
        <h1 class="mt-6 text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{title} <span data-show="highlight" class="bg-gradient-to-r from-violet-600 to-fuchsia-500 bg-clip-text text-transparent">{highlight}</span>
        </h1>
        <p data-show="description" class="mt-6 text-lg leading-8 text-slate-600 sm:text-xl dark:text-slate-300">{description}</p>
        <div class="mt-8 flex flex-wrap gap-3 {align === 'center' ? 'justify-center' : ''}">
        <a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/20 transition hover:-translate-y-0.5 hover:bg-violet-700">{primaryLabel}</a>
        <a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-slate-300 bg-white px-5 font-semibold text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white">{secondaryLabel}</a>
        </div>
        <div class="mt-10">
        <slot />
        </div>
        </div>
        </div>
        </section>
    }
}