99 lines
3.3 KiB
Plaintext
99 lines
3.3 KiB
Plaintext
component SplitHero {
|
|
props {
|
|
eyebrow = ""
|
|
title = "A better digital experience"
|
|
highlight = ""
|
|
description = ""
|
|
primaryLabel = ""
|
|
primaryHref = ""
|
|
primaryIcon = ""
|
|
secondaryLabel = ""
|
|
secondaryHref = ""
|
|
secondaryIcon = ""
|
|
visualPosition = "right"
|
|
reverse = false
|
|
ratio = "balanced"
|
|
size = "default"
|
|
color = "primary"
|
|
variant = "default"
|
|
trustItems = []
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<Section
|
|
spacing='{size === "compact" ? "md" : "xl"}'
|
|
variant='{variant === "soft" ? "soft" : "default"}'
|
|
color='{color}'
|
|
class='overflow-hidden {class}'
|
|
>
|
|
<div
|
|
data-ui-component="SplitHero"
|
|
class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16"
|
|
class:lg:grid-cols-[1.15fr_0.85fr]='ratio === "content"'
|
|
class:lg:grid-cols-[0.85fr_1.15fr]='ratio === "visual"'
|
|
>
|
|
<div
|
|
class="max-w-3xl"
|
|
class:lg:order-2='reverse || visualPosition === "left"'
|
|
>
|
|
{#if eyebrow}
|
|
<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--wire-color-primary-muted)] bg-[var(--wire-color-primary-soft)] px-4 py-2 text-sm font-semibold text-[var(--wire-color-primary)]">
|
|
<span class="icon-[lucide--sparkles] size-4" aria-hidden="true"></span>
|
|
<span>{eyebrow}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<h1 class="text-4xl font-bold leading-[1.08] tracking-[-0.035em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
|
|
<span>{title}</span>
|
|
{#if highlight}
|
|
<span class="block text-[var(--wire-color-primary)]">{highlight}</span>
|
|
{/if}
|
|
</h1>
|
|
|
|
{#if description}
|
|
<p class="mt-6 text-base leading-8 text-[var(--wire-color-text-muted)] sm:text-lg">{description}</p>
|
|
{/if}
|
|
|
|
<HeroActions
|
|
actions='{[
|
|
{ label: primaryLabel, href: primaryHref, icon: primaryIcon, variant: "default", color: color },
|
|
{ label: secondaryLabel, href: secondaryHref, icon: secondaryIcon, variant: "outline", color: color }
|
|
]}'
|
|
align="left"
|
|
stackOnMobile="true"
|
|
fullWidthMobile="true"
|
|
size="lg"
|
|
color='{color}'
|
|
class="mt-8"
|
|
>
|
|
<slot name="actions"></slot>
|
|
</HeroActions>
|
|
|
|
{#if trustItems.length > 0}
|
|
<div class="mt-8 flex flex-wrap gap-x-6 gap-y-3 text-sm text-[var(--wire-color-text-muted)]">
|
|
{#each trustItems as item}
|
|
<span class="inline-flex items-center gap-2">
|
|
<span class='{(item.icon || "icon-[lucide--check-circle-2]") + " size-4 text-[var(--wire-color-primary)]"}' aria-hidden="true"></span>
|
|
<span>{item.label || item.title || item}</span>
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<slot name="trust"></slot>
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<div
|
|
class="relative min-w-0"
|
|
class:lg:order-1='reverse || visualPosition === "left"'
|
|
>
|
|
<div class="absolute -inset-8 -z-10 rounded-[2.5rem] bg-[var(--wire-color-primary-soft)] blur-2xl" aria-hidden="true"></div>
|
|
<slot name="visual"></slot>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
}
|
|
}
|