CTASection

Usage

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

<CTASection
  eyebrow="Ready?"
  title="Start building today"
  description="description"
  primaryLabel="Get started"
  primaryHref="#"
/>

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

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/CTASection.wrn

component CTASection {
  props {
    class = ""
    eyebrow = "Ready?"
    title = "Start building today"
    description = ""
    primaryLabel = "Get started"
    primaryHref = "#"
    secondaryLabel = "Contact sales"
    secondaryHref = "#"
  }
  view {
        <section class="overflow-hidden rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-fuchsia-700 text-center text-white shadow-2xl {class}">
        <p class="text-sm font-bold uppercase tracking-[0.18em] text-violet-100">{eyebrow}</p>
        <h2 class="mx-auto mt-3 max-w-3xl text-3xl font-black sm:text-4xl">{title}</h2>
        <p data-show="description" class="mx-auto mt-4 max-w-2xl text-violet-100">{description}</p>
        <div class="mt-8 flex flex-wrap justify-center gap-3">
        <a href="{primaryHref}" class="inline-flex min-h-12 items-center rounded-xl bg-white px-5 font-semibold text-violet-700 shadow-lg transition hover:-translate-y-0.5">{primaryLabel}</a>
        <a data-show="secondaryLabel" href="{secondaryHref}" class="inline-flex min-h-12 items-center rounded-xl border border-white/30 px-5 font-semibold text-white transition hover:bg-white/10">{secondaryLabel}</a>
        </div>
        </section>
    }
}