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,150 @@
+component CTASection {
+  props {
+    eyebrow = ""
+    title = "Ready to get started?"
+    description = ""
+    icon = ""
+    align = "center"
+    size = "default"
+    color = "primary"
+    variant = "solid"
+    primaryLabel = "Get started"
+    primaryHref = "#"
+    primaryIcon = ""
+    secondaryLabel = ""
+    secondaryHref = ""
+    secondaryIcon = ""
+    backgroundImage = ""
+    maxWidth = "xl"
+    class = ""
+  }
+
+  view {
+    <Section
+      spacing='{size === "compact" ? "md" : "lg"}'
+      variant="default"
+      color='{color}'
+      maxWidth='{maxWidth}'
+      class='{class}'
+    >
+      <div
+        data-ui-component="CTASection"
+        class="relative isolate overflow-hidden rounded-3xl border border-[var(--wire-color-border)] p-8 shadow-xl sm:p-10 lg:p-14"
+        class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
+        class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
+        class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
+        class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
+        class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
+        class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
+        class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
+        class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
+        class:bg-[var(--wire-color-surface-raised)]='variant === "default" || variant === "outline"'
+        class:bg-gradient-to-br='variant === "gradient"'
+        class:from-[var(--wire-color-primary)]='variant === "gradient"'
+        class:to-[var(--wire-color-secondary)]='variant === "gradient"'
+        class:text-[var(--wire-color-on-primary)]='variant === "gradient"'
+        class:text-center='align === "center"'
+      >
+        {#if backgroundImage}
+          <img
+            src='{backgroundImage}'
+            alt=""
+            aria-hidden="true"
+            class="absolute inset-0 -z-20 h-full w-full object-cover opacity-15"
+          />
+        {/if}
+
+        <div
+          class="pointer-events-none absolute -right-20 -top-20 -z-10 size-72 rounded-full bg-white/15 blur-3xl"
+          aria-hidden="true"
+        ></div>
+        <div
+          class="pointer-events-none absolute -bottom-24 -left-20 -z-10 size-72 rounded-full bg-black/10 blur-3xl"
+          aria-hidden="true"
+        ></div>
+
+        <div
+          class="flex flex-col gap-8"
+          class:items-center='align === "center"'
+          class:lg:flex-row='align === "split"'
+          class:lg:items-center='align === "split"'
+          class:lg:justify-between='align === "split"'
+        >
+          <div class="max-w-3xl">
+            {#if icon}
+              <span
+                class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-white/15"
+                class:bg-[var(--wire-color-primary-soft)]='variant !== "solid" && variant !== "gradient"'
+                class:text-[var(--wire-color-primary)]='variant !== "solid" && variant !== "gradient"'
+              >
+                <span class='{icon + " size-6"}' aria-hidden="true"></span>
+              </span>
+            {/if}
+
+            {#if eyebrow}
+              <p
+                class="text-xs font-bold uppercase tracking-[0.18em]"
+                class:text-[var(--wire-color-primary)]='variant !== "solid" && variant !== "gradient"'
+                class:opacity-80='variant === "solid" || variant === "gradient"'
+              >
+                {eyebrow}
+              </p>
+            {/if}
+
+            <h2
+              class="mt-3 text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl"
+              class:text-[var(--wire-color-text)]='variant !== "solid" && variant !== "gradient"'
+            >
+              {title}
+            </h2>
+
+            {#if description}
+              <p
+                class="mt-4 text-base leading-7 sm:text-lg"
+                class:text-[var(--wire-color-text-muted)]='variant !== "solid" && variant !== "gradient"'
+                class:opacity-85='variant === "solid" || variant === "gradient"'
+              >
+                {description}
+              </p>
+            {/if}
+
+            <slot></slot>
+          </div>
+
+          <HeroActions
+            actions='{[
+              {
+                label: primaryLabel,
+                href: primaryHref,
+                icon: primaryIcon,
+                variant: "default",
+                color: color,
+                controlClass: variant === "solid" || variant === "gradient" ? "!bg-white !text-[var(--wire-color-primary)] hover:!bg-white/90" : ""
+              },
+              {
+                label: secondaryLabel,
+                href: secondaryHref,
+                icon: secondaryIcon,
+                variant: "outline",
+                color: color,
+                controlClass: variant === "solid" || variant === "gradient" ? "!border-white/50 !text-white hover:!bg-white/10" : ""
+              }
+            ]}'
+            align='{align === "center" ? "center" : "right"}'
+            stackOnMobile="true"
+            fullWidthMobile="true"
+            size="lg"
+            color='{color}'
+            class="shrink-0"
+          >
+            <slot name="actions"></slot>
+          </HeroActions>
+
+          <slot name="visual"></slot>
+        </div>
+
+        <slot name="footer"></slot>
+      </div>
+    </Section>
+  }
+}