ContactSalesBanner

Usage

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

<ContactSalesBanner
  eyebrow="Enterprise identity"
  title="Ready to secure your next application?"
  description="description"
  primaryLabel="Contact sales"
  primaryHref="/contact"
/>

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

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/ContactSalesBanner.wrn

component ContactSalesBanner {
    props {
        class: string = ""
        eyebrow = "Enterprise identity"
        title = "Ready to secure your next application?"
        description = ""

        primaryLabel = "Contact sales"
        primaryHref = "/contact"

        secondaryLabel = "Start free"
        secondaryHref = "/sign-up"

        iconClass = "icon-[lucide--messages-square]"

        centered = false
        compact = false

        points = []
        trustPoints = []
    }

    view {
        <section
            aria-labelledby="contact-sales-banner-title"
            class="px-5 sm:px-8 lg:px-10 xl:px-12 {class}"
            class:py-10="compact"
            class:sm:py-12="compact"
            class:py-14="!compact"
            class:sm:py-16="!compact"
            class:lg:py-20="!compact"
        >
        <div
                class="relative mx-auto w-full max-w-7xl overflow-hidden rounded-3xl border border-indigo-200/80 bg-linear-to-br from-indigo-50 via-white to-violet-50 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 dark:shadow-black/20"
            >
        <!-- Background decoration -->
        <div
                    aria-hidden="true"
                    class="pointer-events-none absolute inset-0 overflow-hidden"
                >
        <div class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10">
        </div>
        <div class="absolute -bottom-28 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10">
        </div>
        <div class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-indigo-400/50 to-transparent dark:via-indigo-400/20">
        </div>
        </div>
        <div
                    class="relative"
                    class:px-6="compact"
                    class:py-7="compact"
                    class:sm:px-8="compact"
                    class:px-6="!compact"
                    class:py-8="!compact"
                    class:sm:px-9="!compact"
                    class:sm:py-10="!compact"
                    class:lg:px-12="!compact"
                    class:lg:py-12="!compact"
                >
        <!-- Main content -->
        <div
                        class="gap-8"
                        class:flex="centered"
                        class:flex-col="centered"
                        class:items-center="centered"
                        class:text-center="centered"
                        class:mx-auto="centered"
                        class:max-w-4xl="centered"
                        class:grid="!centered"
                        class:lg:grid-cols-[minmax(0,1fr)_auto]="!centered"
                        class:lg:items-center="!centered"
                        class:lg:gap-12="!centered"
                    >
        <!-- Copy -->
        <div
                            class="min-w-0"
                            class:max-w-3xl="centered"
                            class:max-w-4xl="!centered"
                        >
        <!-- Eyebrow -->
        <div
                                class="flex"
                                class:hidden="eyebrow === ''"
                                class:justify-center="centered"
                                class:justify-start="!centered"
                            >
        <span
                                    class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1.5 text-xs font-semibold text-indigo-700 shadow-sm backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
                                >
        <span class="{iconClass} h-3.5 w-3.5" aria-hidden="true" >
        </span>

                                    {eyebrow}
                                </span>
        </div>
        <!-- Title -->
        <h2
                                id="contact-sales-banner-title"
                                class="font-bold tracking-tight text-slate-950 dark:text-white"
                                class:mt-5="eyebrow !== ''"
                                class:text-2xl="compact"
                                class:leading-tight="compact"
                                class:sm:text-3xl="compact"
                                class:text-3xl="!compact"
                                class:leading-tight="!compact"
                                class:sm:text-4xl="!compact"
                            >
                                {title}
                            </h2>
        <!-- Description -->
        <p
                                class="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400 sm:text-base"
                                class:hidden="description === ''"
                                class:mx-auto="centered"
                                class:max-w-2xl="centered"
                                class:max-w-3xl="!centered"
                            >
                                {description}
                            </p>
        <!-- Dynamic points -->
        <div
                                class="mt-6 flex flex-wrap gap-x-5 gap-y-3"
                                class:hidden="points.length === 0"
                                class:justify-center="centered"
                                class:justify-start="!centered"
                            >
                                {#each points.slice(0, 4) as point}
                                <div class="inline-flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
        <span
                                        class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
                                    >
        <span class="icon-[lucide--check] h-3.5 w-3.5" aria-hidden="true" >
        </span>
        </span>

                                    {point}
                                </div>
                                {/each}
                            </div>
        </div>
        <!-- Actions -->
        <div
                            class="flex shrink-0 flex-col gap-3 sm:flex-row"
                            class:hidden="primaryLabel === '' && secondaryLabel === ''"
                            class:mt-1="centered"
                            class:justify-center="centered"
                        >
        <a
                                href="{secondaryHref}"
                                class="h-12 items-center justify-center rounded-xl border border-slate-200 bg-white/90 px-5 text-sm font-semibold text-slate-700 shadow-sm backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-white hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/30 dark:hover:bg-white/10 dark:hover:text-indigo-300"
                                class:hidden="secondaryLabel === ''"
                                class:inline-flex="secondaryLabel !== ''"
                            >
                                {secondaryLabel}
                            </a>
        <a
                                href="{primaryHref}"
                                class="group h-12 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
                                class:hidden="primaryLabel === ''"
                                class:inline-flex="primaryLabel !== ''"
                            >
                                {primaryLabel}

                                <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" >
        </span>
        </a>
        </div>
        </div>
        <!-- Dynamic trust strip -->
        <div
                        class="mt-8 border-t border-indigo-200/70 pt-5 dark:border-indigo-500/15"
                        class:hidden="compact || trustPoints.length === 0"
                    >
        <div
                            class="flex flex-wrap items-center gap-x-6 gap-y-3"
                            class:justify-center="centered"
                            class:justify-start="!centered"
                        >
                            {#each trustPoints.slice(0, 4) as trustPoint}
                            <span class="inline-flex items-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
        <span class="{trustPoint.iconClass} h-4 w-4 {trustPoint.iconColorClass}" aria-hidden="true" >
        </span>

                                {trustPoint.label}
                            </span>
                            {/each}
                        </div>
        </div>
        </div>
        </div>
        </section>
    }
}