release: WRNexusJS 0.3.3

packages/ui/components/PricingHero.wrn

@@ -6,5 +6,61 @@ component PricingHero {
     align = "start"
     class = ""
   }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
+
+  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>
+  }
 }