67 lines
2.1 KiB
Plaintext
67 lines
2.1 KiB
Plaintext
component PricingHero {
|
|
props {
|
|
eyebrow = ""
|
|
title = ""
|
|
description = ""
|
|
align = "start"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
class="relative overflow-hidden border-b border-[var(--wire-color-border)] bg-[var(--wire-color-background)] px-4 py-16 text-[var(--wire-color-text)] sm:px-6 sm:py-20 lg:px-8 lg:py-24 {class}"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,var(--wire-color-primary-soft),transparent_68%)] opacity-70"
|
|
aria-hidden="true"
|
|
></div>
|
|
|
|
<div class="relative mx-auto w-full max-w-7xl">
|
|
{#if align === "center"}
|
|
<header class="mx-auto max-w-4xl text-center">
|
|
{#if eyebrow}
|
|
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]">
|
|
{eyebrow}
|
|
</p>
|
|
{/if}
|
|
|
|
{#if title}
|
|
<h1 class="mt-5 text-4xl font-semibold tracking-[-0.045em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
|
|
{title}
|
|
</h1>
|
|
{/if}
|
|
|
|
{#if description}
|
|
<p class="mx-auto mt-6 max-w-3xl text-lg leading-8 text-[var(--wire-color-text-muted)] sm:text-xl">
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
</header>
|
|
{:else}
|
|
<header class="max-w-4xl">
|
|
{#if eyebrow}
|
|
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]">
|
|
{eyebrow}
|
|
</p>
|
|
{/if}
|
|
|
|
{#if title}
|
|
<h1 class="mt-5 text-4xl font-semibold tracking-[-0.045em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
|
|
{title}
|
|
</h1>
|
|
{/if}
|
|
|
|
{#if description}
|
|
<p class="mt-6 max-w-3xl text-lg leading-8 text-[var(--wire-color-text-muted)] sm:text-xl">
|
|
{description}
|
|
</p>
|
|
{/if}
|
|
</header>
|
|
{/if}
|
|
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|