release: WRNexusJS 0.5.12

2026-07-30 18:59:01 +05:30
parent f37303b22d
commit d64e899993
462 changed files with 75432 additions and 2570 deletions
@@ -0,0 +1,98 @@
+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>
+  }
+}